画像を表示するグリッドがあります。各画像は、セル サイズに適応することになっています。
このCSSを使用して、画像を自動的に適応させています:
img {
max-width: 100%;
max-height: 100%;
}
次に、画像を含む div (セル) のサイズを変更すると、画像が div に適応するはずです。Chrome/Firefox で正常に動作します。Safari 5.1.7 (Win 7) では、div の width を変更すると機能しますが、 heightでは機能しません。
ここにサンプルケースを作成しました:http://jsfiddle.net/MNL29/7/
height
ボタンは div の高さを増やし、ボタンwidth
は幅を変更し、Safari では画像のサイズは変更されません。
なぜこれが起こっているのですか?(Javascriptなしで)それを回避する方法はありますか?