縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法

背景画像を指定する際、例えば1000*600pxの画像であれば、以下のように指定するのが一般的なやり方かと思います。

.content{
 background: url(bg.jpg) 0 0 no-repeat;
 width: 1000px;
 height: 600px;
}

ですが、上記のやり方だとレスポンシブ対応をする場合、細かい調整が必要になり結構面倒です。

というわけで、背景画像に固定値を指定せずに横幅100%で可変表示させたい、といった場合に便利な手法をご紹介したいと思います。

縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法

背景画像を横幅いっぱいに表示させるためには、CSSで以下のように指定します。

.content{
 background: url(bg.jpg) 0 0 no-repeat;
 background-size: contain;
 width: 100%;
 height: 0;
 padding-top: calc( 600/1000*100% ); /* 画像の高さ÷画像の横幅×100% */
}

まず「width: 100%;」で要素を横幅いっぱいに指定し、「height: 0;」で高さをなくします。そのうえで、padding-topで画像の高さを確保しています。

あとがき

レスポンシブ対応のサイトで使える手法なので、覚えておくと便利です。