firefox - プロポーショナル イメージ スケール - 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/