img 高度为表格行的 100%答案

【问题标题】：img height 100% of table rowimg 高度为表格行的 100%
【发布时间】：2021-11-02 18:24:56
【问题描述】：

如果我有这样的 HTML：

<table>
   <tr>
      <td>
         <img src="a.png">
      </td>
      <td>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
      </td>
   </tr>
</table>

第二列可以有可变数量的段落，因此高度会有所不同。无论行的高度是多少，我都希望图像是那个高度。我试过这个：

img {
   height: 100%;
}

但它似乎没有做任何事情。如果可能，我想避免更改 HTML，我可以只使用 CSS 吗？

【问题讨论】：

我知道你不想更改 HTML，但是 IMO，因为它看起来不是表格数据，我建议不要使用 <table>，它可能会使样式更容易
为什么不把a.png 变成background-image 的background-image？
@StevenPenny 有没有可以用 CSS 定位的类或 ID？
@StevenPenny 图片总是一样的吗？是横向的还是纵向的？
我觉得你可以使用 object-fit:cover;然后将宽度设置为 100% 而不是高度，这会让你接近。但是，如果您的表格也总是相同的宽度，这可能会有所帮助。也许其中一个适合对象的属性会起作用。这是我在 W3 上做的一个示例：w3schools.com/code/tryit.asp?filename=GI8K9OUM4FX7

标签： html css html-table

【解决方案1】：

所以我想增加图像高度的原因是因为第二列可以更大，这会将图像向下推默认表格垂直居中。我没有关注图像大小，而是而是将图像移到顶部：

td {
   vertical-align: top;
}

如果有人对原始问题有解决方案，我仍然感兴趣，但是这应该是一种解决方法。

【讨论】：