#47 背景画像の比率を保ったまま、レスポンシブ対応【ぴよぴよコーダーの開発日記】
ちょくちょく忘れがちなので備忘録的にメモ。
背景画像のレスポンシブ デモ
imgタグを使った場合 デモ
背景画像のレスポンシブの場合、下記のようにheight / width * 100をpadding-topで%指定する。下記は高さ637 / 幅900が0.7なので70%
.kv {
position: relative;
background: url(../img/sea.jpg) center top no-repeat;
background-size: cover;
padding-top: 70%; /* 高さ637 / 幅900 */
}
計算がめんどくさいときはchromeのコンソールタブに打ち込めば出力される
この記事が気に入ったらサポートをしてみませんか?