拉伸图像以填充其 table 单元格的高度

Question

我有一个高度未知的 table 单元格，其中包含一个 img。此 img 具有固定的像素宽度，但我需要它进行拉伸以填充（但不超过）table 单元格的整个高度。无论高度如何，宽度都应保持不变。

通常，我会使用 height: 100% 执行此操作，但这在这种情况下似乎不起作用：

img {
  display: block;
  width: 25px;
  height: 100%;
}

<table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td>
      <img src="https://placehold.it/20x20" />
    </td>
  </tr>
</table>

如何让图片填满单元格的高度？

Answer 1

将图像作为背景，您可以轻松实现这一点。您还可以将 background-image 保留为内联样式，以便能够将其设置为 img 元素

.img {
  width: 25px;
  background-size:100% 100%;
}

<table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td class="img" style="background-image:url(https://placehold.it/20x20)">
    </td>
  </tr>
</table>

如果您想继续使用 img，您可以使用 position:absolute

.img {
  width: 25px;
  position:relative;
}
.img img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td class="img">
      <img src="https://placehold.it/20x20)"/>
    </td>
  </tr>
</table>

Answer 2

使用 Outlook 桌面版 2007-2019 等电子邮件客户端时，您需要指定图像的宽度，尤其是当您以与其物理尺寸不匹配的尺寸显示图像时。否则 Outlook 将忽略您的样式 sheet 并恢复为实际大小。

对于身高，一般可以留空，在样式中添加sheet height: auto;

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

祝你好运。

拉伸图像以填充其 table 单元格的高度

Stretching an image to fill the height of its table cell

html

css

html-table

html-email