设置浏览器调整大小的比例图像宽度

Question

如果我的图像与风格相结合：

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

图像调整到包含它的框的宽度的50％，并垂直调整大小，保持纵横比。

这似乎要求将封闭的DIV设置为特定的宽度和高度值。但是，如果您希望封闭的DIV在浏览器被拖动得更小或更大时自动调整大小，那么这不是问题吗？

Answer 1

我已经澄清了你对original question的回答。去看看，看看它是否清除了。或多或少，如果您希望图像使用窗口调整大小，则无法将DIV设置为固定的宽度和高度。 DIV也必须具有％宽度和高度。

Answer 2

您需要手动指定width和height属性才能使图像保持其尺寸。如果您使用服务器端编码（PHP / ASP），这不会太困难。

另一种方法是使用JavaScript动态计算和调整图像大小。

Answer 3

不，图片仍然是div的50％，如果div是页面的一部分，那没关系。

Answer 4

它的所有比例：封闭的div可能是整个窗口的2/3，图像将是其中的1/2。这一切都在它显示之前计算出来，只是一堆数字运算。 ; d