比例圖像比例縮放 - 適用於Firefox和Chrome瀏覽器，但不適用於Safari瀏覽器

Question

任何CSS專家都知道爲什麼Firefox和Chrome最新版本可以正常工作，但在Safari中無法正常工作？ 在Safari中，由於我縮小了瀏覽器的寬度，圖像水平縮放，但不是垂直縮放，變得「擠壓」。

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

Answer 1

我想你想要的是height: auto;而不是height: 100%;。這樣，即使寬度發生變化，圖像的高度也會根據其自然尺寸自動與寬度成比例。

經過Safari，Firefox和Chrome的測試。這是我的小提琴：http://jsfiddle.net/qLqr9/1/