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

【问题标题】：Setting proportional image widths for browser resize为浏览器调整大小设置成比例的图像宽度
【发布时间】：2009-07-10 05:16:35
【问题描述】：

如果我有一个与样式相结合的图像：

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

img.test { width: 50%;}

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：