tdタグ内のイメージをスケーリングしますか？

Question

私は9つのtdを含むテーブルを持っています。それぞれには異なるイメージが含まれていなければなりません。

だから私は持っている：

<td> 
    <img src="pics/LLTR.jpg" class="lltr"></img> 
</td> 

とCSSクラス

.lltr:hover{ 
    opacity: 0.8; 
} 

.lltr{ 
    max-height:auto; 
    max-width:100%; 
    opacity: 0; 
    -webkit-transition: opacity 1s; /* Safari */ 
    transition: opacity 1s; 
} 

これは、現在のバージョンです。私は背景イメージと他の多くのもののどれもがうまくいっていないものとしてそれを試しました。 テーブルレイアウトがfixedに設定されていても、tdの幅とautoの高さによってイメージが明らかに表示されます。

背景画像のカバープロパティと同じように、「残された」高さを表示せずに画像を幅に比例して拡大縮小する方法はありますか？

Thxを、 Rawk

テーブルに対する全コード：

<table id="maintab"> 
     <tr> 
      <td class="isFixed">1</td> 
      <td class="isFixed">2 
      </td> 
      <td class="isFixed">3</td> 
     </tr> 
     <tr> 
      <td class="isLinked"> 
       <img src="pics/LLTR.jpg" class="lltr"></img> 
      </td> 
      <td class="isLinked">5</td> 
      <td class="isLinked">6</td> 
     </tr> 
     <tr> 
      <td class="isLinked">7</td> 
      <td class="isLinked">8</td> 
      <td class="isLinked">9</td> 
     </tr> 
    </table> 

CSS部分：ここで

#maintab{ 
    width:100vw; 
    height:100vh; 
    border-collapse: separate; 
    border-spacing: 20px; 
    margin:0; 
    padding:0; 
    text-align:center; 
    vertical-align:middle; 
    table-layout:fixed; 
} 

.lltr:hover{ 
    opacity: 0.8; 
} 

.lltr{ 
    max-height:auto; 
    max-width:100%; 
     /*background-image: url('pics/LLTR.jpg'); 
     background-size:cover;*/ 
    opacity: 0; 
    -webkit-transition: opacity 1s; /* Safari */ 
    transition: opacity 1s; 
} 

.isLinked{ 

} 

.isLinked:hover{ 
    background-color:rgba(240,240,240,0.75);cursor:pointer; 
} 

.isFixed{ 
    background-color:rgba(197,197,197,0.6); 
} 

Answer 1

はうまくいくかもしれない概念実証です。

テーブルセルのセルの高さと幅（私の例では2x2グリッド）を に設定し、各テーブルセル内にdivをoverflow: hiddenと置きます。

次に、画像の幅を100％に設定し、余分な高さは をdiv要素でクリップします。

画像がポートレートタイプであると仮定しました。場合によっては、画面が十分に大きい場合には、画像全体を表示するのに十分なスペースがテーブルに存在することがあります。

table { 
 
    table-layout: fixed; 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    height: 50vh; 
 
    width: 50vw; 
 
    padding: 0; 
 
} 
 
td div { 
 
    border: 1px dotted gray; 
 
    height: inherit; 
 
    width: inherit; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 
td div img { 
 
    width: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<table cell-spacing=0> 
 
    <tr> 
 
    <td><div>one</div></td> 
 
    <td><div>three</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div>two</div></td> 
 
    <td><div><img src="http://lorempixel.com/400/600/nature"></div></td> 
 
    </tr> 
 
</table>