CSSで画像に対してmin-heightプロパティを設定すると Safariで画像の縦横比が崩れる

CSSで画像に対してmin-heightプロパティを設定するとSafariで画像の縦横比が崩れる場合があります。

原因

IE等のブラウザでは画像の縦横比に合わせてmin-heightが調整されるため、min-heightが大きい数値(100%など)であった場合でも、画像の縦横比を維持して実際に表示される画像はmin-heightの値よりも小さくなります。一方、Safariではmin-heightに大きい数値があった場合は画像の縦横比を変更してmin-heightの値に画像を合わせる動作になります。

対策

対策1:min-heightプロパティを削除する

min-heightプロパティを削除するとこの問題を回避できます。

対策2:min-heightプロパティの値を小さくする

min-heightプロパティの値を十分小さい値にすることで、問題を軽減できます。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。