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

时间:2015-03-02 16:16:08

标签: html css image resize image-resizing

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

有没有解决方案?

我们说我们有一个宽度为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/

2 个答案:

答案 0 :(得分:1)

使用:

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

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

使用:

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

您将图像的宽度设置为<td>宽度的50%。在你的小提琴中,<td>的宽度由右栏中的文字设定。

答案 1 :(得分:1)

当你写<img style="width: 50%;" />时,50%并不是指原始图像尺寸的50%。它实际上是指父级宽度的50%,在这种情况下,父级是<td>