td 태그 안의 이미지 크기를 조정 하시겠습니까?

Question

나는 각각 9 개의 다른 이미지를 포함해야하는 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; 
} 

을이 현재 버전입니다. 나는 그것을 배경 이미지와 많은 다른 것들로 시도했지만 아무도 제대로 작동하지 않았다. 테이블 레이아웃이 고정으로 설정되어 있어도 이미지가 td 및 자동 높이의 너비와 함께 분명히 표시되어 높이가 확장됩니다.

배경 이미지의 표지 속성과 마찬가지로 "남은"높이를 표시하지 않고 너비에 비례하여 이미지 크기를 조정할 수 있습니까?

들으, 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 격자)의 높이와 너비를 각각 으로 설정 한 다음 각 표 셀 내에 을 넣고 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>