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

Question

如果我将图像与样式相结合：

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

img.test { width: 50%;}

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

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

score 2 · Accepted Answer

我已经澄清了我对你原来问题的回答。去看看，看看能不能解决问题。或多或少，如果您希望图像随窗口调整大小，则无法将 DIV 设置为固定的宽度和高度。DIV 还必须具有 % 宽度和高度。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

于 2009-07-09T20:34:05.117 回答

score 0 · Accepted Answer

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

4 回答 4