javascript - 当仅给出宽度或高度时，所有浏览器都会按比例缩放图像吗？

Question

我注意到，如果我只指定图像的一个维度，可以使用 width和height img 上的属性标签或使用 CSS，浏览器会自动按比例缩放其他尺寸。

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

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

Answer 1

是的，这是 CSS2 specs 的一部分:

[...] if 'width' has a computed value of 'auto', 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:

(used height) * (intrinsic ratio)

定义的 CSS 宽度或高度将在任何兼容 CSS2 的浏览器中正确缩放(我在 IE6 及更高版本中进行了测试)。

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

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

这是一个 Fiddle供测试用。显然，HTML 属性几乎在所有浏览器中都可以正确缩放。但我仍然建议使用 CSS 进行元素样式设置，以保持一致性并保持标记干净。样式应通过 CSS 完成。