背景画像を指定する際、例えば1000*600pxの画像であれば、以下のように指定するのが一般的なやり方かと思います。
1 2 3 4 5 | .content{ background : url (bg.jpg) 0 0 no-repeat ; width : 1000px ; height : 600px ; } |
ですが、上記のやり方だとレスポンシブ対応をする場合、細かい調整が必要になり結構面倒です。
というわけで、背景画像に固定値を指定せずに横幅100%で可変表示させたい、といった場合に便利な手法をご紹介したいと思います。
縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法
背景画像を横幅いっぱいに表示させるためには、CSSで以下のように指定します。
1 2 3 4 5 6 7 | .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で画像の高さを確保しています。
あとがき
レスポンシブ対応のサイトで使える手法なので、覚えておくと便利です。