在 td 标签内缩放图像？

Question

我有一个 table 包含九个 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;
}

这是当前版本。我试过它作为背景图像和许多其他东西 none，其中一些工作正常。图像显然显示为 td 的宽度和自动高度，这导致 td 在高度上扩展，即使 table-layout 已设置为固定。

有没有办法在不显示任何 "leftover" 高度的情况下按宽度比例缩放图像，就像背景图像的封面属性一样？

谢谢，罗克

table的完整代码：

<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

这是一个可能有效的概念验证。

我设置了 table 单元格的高度和宽度（在我的示例中是 2x2 网格），然后在每个 table 单元格中放置一个 div 和 overflow: hidden.

然后我将图像的宽度设置为 100%，任何多余的高度都将被 div 元素剪裁。

我以为图片是肖像类型的。在某些情况下，对于足够大的屏幕，table 中可能有足够的 space 来显示整个图像。

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>

在 td 标签内缩放图像？

Scaling image inside td tag?

html

css

height

image