在 td 标签内缩放图像？答案

【问题标题】：Scaling image inside td tag?在 td 标签内缩放图像？
【发布时间】：2017-05-19 07:57:40
【问题描述】：

我有一个包含九个 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 的宽度和 auto 高度显示，即使 table-layout 已设置为固定，这也会导致 td 的高度扩大。

有没有一种方法可以在不显示任何“剩余”高度的情况下根据宽度按比例缩放图像，就像背景图像的封面属性一样？

谢谢，罗克

表格的完整代码：

<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);
}

【问题讨论】：

我不明白为什么背景图片作为封面不起作用？
我也不是，但是将图像设置为背景图像作为封面会将图像设置为其实际高度（扩展 td）并切断剩余宽度。
表格单元格将扩大高度以容纳内容，在这种情况下为图像。你是在指定桌子的高度吗？
我已将表格大小指定为 100vw 和 100vh，并将每个 td 高度设置为 33%。
刚刚添加了上面的代码

标签： html css image height

【解决方案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="https://picsum.photos/400/600/"></div></td>
  </tr>
</table>

【讨论】：