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

Question

有趣的是，当您按百分比调整大小时，表格单元格如何不适应您调整大小的图像。如果你用绝对值调整它的大小，它就可以完成这项工作。

有什么解决办法吗？

假设我们有一个宽度为 200px 的 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>。