新着記事一覧
タグ一覧
テーマ
ライト
ダーク
iPentec.com
/
Doc
/
CSS
目次
1
原因
2
対策
2.1
対策1:min-heightプロパティを削除する
2.2
対策2:min-heightプロパティの値を小さくする
CSSで画像に対してmin-heightプロパティを設定すると Safariで画像の縦横比が崩れる - CSS
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の作業もする。
関連するページ
CSS変数のスコープの範囲
段組み間の余白を調整する
ページ幅に合わせて左右のカラム幅が変わる2段組みレイアウトを作成する (2段組みリキッドレイアウト %指定 左側メニュー)
画像を選択するUIを作成する - RadioButton を利用
枠に影をつける (box-shadowプロパティを利用)
FlexBox でカラムの最大幅を設定する
CSS中にUnicode文字を記述する
親要素のpositionプロパティの設定の違いによる position:absolute の動作の違い
掲載日: 2014-01-26
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.