#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のコンソールタブに打ち込めば出力される

参考：背景画像の比率を保ったまま、レスポンシブ対応する