横幅いっぱいの背景画像を縦横比を保ったままレスポンシブ対応

HTML

<div class="box"></div> ← 背景を設定するボックス

CSS

.box{
width:100%;
height:0;
padding-top:〇〇%; /* 画像の高さ÷幅×100*/
background-size:contain;
background:url(画像のパス) 0 0 no-repeat;
}

background-size:containは画面全体を表示(隙間ができることも)
background-size:coverは常に領域いっぱい(画像の端が切れる)

コメント