当只给出宽度或高度时,所有浏览器是否按比例缩放图像？

Question

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

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

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

Answer 1

是的,这是CSS2规范的一部分:

[...]如果'width'的计算值为'auto','height'具有一些其他计算值,并且该元素具有固有比率; 那么'width'的使用值是:

(used height) * (intrinsic ratio)

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

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

显然,如果你定义一个CSS height,同样适用width:auto.

这是一个测试小提琴.显然,HTML属性也可以在几乎所有浏览器中正确扩展.但我仍然建议使用CSS进行元素样式,以保持一致性并保持标记清洁.样式应该通过CSS完成.