阻止 table 单元格适应真实图像大小

Question

有趣的是，当您按百分比调整图像大小时，table 单元格无法适应调整后的图像。如果您使用绝对值调整它的大小，它就可以完成工作。

有解决办法吗？

假设我们有一个宽度为 200 像素的 img。

现在，2 个代码场景。

第一个：

<td><img src="..." style="width: 50%; height: auto;" /></td>

第二个：

<td><img src="..." style="width: 100px; height: auto;" /></td>

我假设在这两种情况下它看起来都一样，但事实并非如此。 在第一种情况下，td 的宽度仍然是 200px。 仅在第二种情况下，td 调整为 100px 宽度。

虽然百分比调整对我来说非常重要。这个问题有什么css技巧吗？

示例：http://jsfiddle.net/xndks9r1/

Answer 1

与：

<td><img src="..." style="width: 100px; height: auto;" /></td>

您正在将图像的宽度设置为特定值。

与：

<td><img src="..." style="width: 50%; height: auto;" /></td>

您将图像的宽度设置为 <td> 宽度的 50%。在您的 Fiddle 中，<td> 的宽度由右侧列中的文本设置。

Answer 2

写<img style="width: 50%;" />时，50%不是指原图大小的50%。它实际上指的是父级宽度的 50%，在这种情况下，父级是 <td>.