背景画像をセルテーブルに合わせるにはどうすればいいですか（歪ませて）

Question

背景画像をセルテーブルに合わせようとしています。 画像にゆがみはありますが、繰り返しはできません。 ブラウザが展開されると、イメージも展開する必要があります。

私はたくさんの組み合わせを試しました。 背景のサイズを設定します。

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>

あなたたちは助けることができると思います。 ありがとうございます。

Answer 1

使用background-size:100% 100%;は、これはあなたが

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-repeat: no-repeat; 
 
    background-size:100% 100%; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

これはあなたを助けるのに役立ちますが、div要素のサイズは、画像に応じていないので、画像はストレッチです。

.selected { 
 
    background-image: url("http://www.pd4pic.com/images/red-box-cross-square-wrong.png"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<div class="w3-container w3-row"> 
 
    <table class="w3-table"> 
 
    <tr> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
     <td class="selected"></td> 
 
    </tr> 
 
    </table> 
 
</div>