当只给定宽度或高度时，是否所有浏览器都按比例缩放图像

Do all browsers scale images proportionally when only width or height is given?

本文关键字：是否浏览器图像缩放按比例高度更新时间：2024-06-24

我注意到，如果我只指定图像的一个维度，无论是使用img标记上的width和height属性，还是使用CSS，浏览器都会自动按比例缩放另一个维度。

例如，如果我有一个100x150的图像，并且我指定了width="50"或width:50px;，浏览器会自动将高度设置为75像素。

这种行为是否适用于所有浏览器？为了节省时间，我可以省略一个吗？我正在用JavaScript预加载图像并动态插入它们，所以在下载时不必担心图像会影响布局。

是的，这是CSS2规范的一部分：

[…]如果"width"的计算值为"auto"，则"height"具有其他计算值，并且该元素确实具有固有比率；则使用的"宽度"值为：
(used height) * (intrinsic ratio)

定义的CSS宽度或高度将在任何符合CSS2的浏览器中正确缩放（我在IE6及更高版本中测试过它）。

我认为这是一个非常有用的功能。假设我有一个800px宽度布局的论坛，我允许用户上传图像。将帖子的图像设置为没有定义高度的max-width:790px（默认为height:auto）将自动使它们适合，而不会破坏我的布局，同时保持正确的纵横比。整洁的东西注意：IE6不支持max-width。

显然，如果您定义了一个具有width:auto的CSS height，也同样适用。

这里有一个Fiddle用于测试。显然，HTML属性在几乎所有的浏览器中都能正常伸缩。但我仍然建议使用CSS进行元素样式设计，以保持一致性并保持标记的整洁。样式应该通过CSS来完成。