Масштабирование изображения внутри тега td?

Question

У меня есть таблица, содержащая девять 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; 
} 

Это текущая версия. Я пробовал это как фоновое изображение и много других вещей, которые не работали должным образом. Изображение, очевидно, отображается с шириной td и автоматической высотой, что приводит к тому, что td расширяется по высоте, даже если таблица-макет установлена ​​на фиксированную.

Есть ли способ масштабировать изображение пропорционально ширине без выпадения любой «оставшейся» высоты, как и свойство обложки для фоновых изображений?

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

Вот понятие доказательства правильности, которые могли бы работать.

я установить высоту и ширину ячейки таблицы (в моем примере, 2х2 сетки), , а затем внутри каждой ячейки таблицы я место 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>