【CSS】背景画像の縦横比を維持してレスポンシブする方法

今回はCSSで、「背景画像の縦横比を維持してレスポンシブする方法」を紹介します。

ブラウザ幅が小さくなるにつれて、背景画像の縦横比を維持するコーディングをしたい人は、是非参考にしてください。

以下のデモが完成形です。

ブラウザ幅を小さくしてみてください。

すると、背景画像の縦横比を維持しながら小さくなっていくことがわかります。

HTMLコードはこちら。

<div class="first-v"></div>

クラスを付けた空のdivタグを用意します。

CSSコードはこちら。

.first-v {
    background-image: url(../image/img1.JPG);
    background-size: cover;
    height: 0%;
    padding-top: min(100vh, 75%);
}

「background-image」と「background-size: cover;」で、背景画像を指定して整えます。

画像パスはお好きなものをどうぞ。

そして背景画像の縦横比を維持するポイントは、「height: 0%;」で高さを消して「padding-top」で高さを取るようにします。

そうすることで、ブラウザ幅が小さくなったとしても背景画像の縦横比が維持されるのです。

まとめ

今回紹介した実装は実務でも使えますので、是非真似してコーディングしてみてください！