比例图像比例适用于 Firefox 和 Chrome，但不适用于 Safari

【问题标题】：Proportional image scale-works in Firefox and Chrome but NOT in Safari比例图像比例适用于 Firefox 和 Chrome，但不适用于 Safari
【发布时间】：2012-07-12 02:35:19
【问题描述】：

任何 CSS 专家都知道为什么这在 Firefox 和最新的 Chrome 中可以正常工作，但在 Safari 中却不行？在 Safari 中，当我减小浏览器的宽度时，图像会水平缩放，但不会垂直缩放，并且会变得“压扁”。

width: 100%;
max-width: 560px;
height: 100%;
max-height: 490px;

【问题讨论】：

标签： firefox css safari

【解决方案1】：

我认为你想要的是height: auto; 而不是height: 100%;。这样，即使宽度发生变化，图像的高度也会根据其自然尺寸自动与宽度成比例。

在 Safari、Firefox 和 Chrome 中测试。这是我的小提琴：http://jsfiddle.net/qLqr9/1/

【讨论】：