我注意到，如果我只指定图像的一个维度，或者使用标签上的widthandheight属性img或使用 CSS，浏览器会自动按比例缩放另一个维度。
例如，如果我有一个 100x150 的图像，并且我指定width="50"or width:50px;，浏览器会自动将高度设置为 75 像素。
这种行为是否适用于所有浏览器？我可以省略一个只是为了节省时间吗？我正在使用 JavaScript 预加载图像并动态插入它们，因此我不必担心下载时图像会影响布局。
问问题
588 次
1 回答
5
是的，这是CSS2 规范的一部分：
[...] 如果 'width' 的计算值为 'auto'，则 'height' 有一些其他的计算值，并且该元素确实具有内在比率；那么'width'的使用值是：
(used height) * (intrinsic ratio)
定义的 CSS 宽度或高度将在任何兼容 CSS2 的浏览器中正确缩放它们（我在 IE6 及更高版本中对其进行了测试）。
我认为这是一个非常有用的功能。假设我有一个800px宽度布局的论坛，我允许用户上传图片。将帖子的图像设置为max-width:790px没有定义的高度（height:auto默认情况下）将自动使它们适合而不破坏我的布局，同时保持正确的纵横比。整洁的东西。注意：max-widthIE6 不支持。
显然，如果您定义一个height具有width:auto.
这是一个用于测试的小提琴。显然，HTML 属性也可以在几乎所有浏览器中正确缩放。但我仍然建议使用 CSS 进行元素样式设置，以保持一致性并保持标记干净。样式应该通过 CSS 完成。
于 2012-08-01T04:05:28.773 回答