Question

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

通常，我会使用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 Desktop 2007-2019），您需要指定图像的宽度，尤其是如果显示的尺寸与其实际尺寸不匹配时。否则，Outlook将忽略您的样式表并恢复为实际大小。

对于高度，通常可以将其保留为空白，然后在样式表height: auto;

中添加

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

祝你好运。

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

2 个答案: