CSSで縦横比を保ったまま背景画像を横幅いっぱいに表示する方法
縦横比をキープしたまま画像をウィンドウ幅いっぱいに表示する。レスポンシブサイトが当たり前の昨今、よくつかう技術です。
<img>タグで表示する場合であれば比較的簡単ですが、背景画像だと少し小技が必要になってくるので、今回はそんなCSSの方法を紹介します。小技といってもpaddingでcalcをつかうだけなので本当に簡単。
サンプル
See the Pen
rbzMqx by keitasakurai (@mdesignyokohama)
on CodePen.
ポイントになるのはこのCSS。「画像高さ ÷ 画像横幅 × 100」という計算式で出された数字をpadding-topに設定して高さを保持します。
padding-top: calc(460 / 1116 * 100%);今回のサンプル画像は、1116px×460pxの画像です。使う画像のサイズによってここは調整が必要です。
その他の方法
background-size:coverをつかっても、もちろん縦横比を保ったまま背景画像を表示させることが出来ます。あとは、imgタグで100%表示して、その上にposition等を駆使する方法とか（実際はあまりつかわないと思いますけど）。状況、好みに応じて使い分けても良いかも知れません。
