如何将图像大小限制为文本长度给定的表格单元格宽度

Question

我有一个表，每个表的行只有一列，其内容（仅文本）定义了表的宽度。 在其中一行中，我希望使用图片而不是文本，但是我希望它适应上一行定义的单元格宽度，因此不会强制调整表格的大小。

例：

<table>
<tr><td>Text definining the width of the table</td></tr>
<tr><td><img src="some_picture.jpg"></td></tr>
</table>

该表是无边界的，因此我愿意采用其他解决方案，该解决方案涉及其他标记而不是表（例如div），只要它仅使用html和css（没有javascript，没有花哨的框架）即可。

Answer 1

您可以使用对象拟合和绝对位置来完成此操作

object-fit CSS属性调整图像大小以适合其容器。

更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

绝对位置将影响图像不会增加表格单元格的宽度。

将工作台设置为相对位置将影响绝对定位的图像在其工作台单元内。

更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/position

 table { position: relative; display: inline-block; } img { position: absolute; left: 0; right: 0; width: 100%; height: auto; object-fit: cover; object-position: center; } 

 <table> <tr><td class="text">Text definining the width of the table</td></tr> <tr><td><img src="https://via.placeholder.com/300" /></td></tr> </table>