【CSS】背景画像の比率を保ったまま、レスポンシブ対応する方法

backgroundで表示した背景画像の比率を保ちながら、レスポンシブ対応をするには

これにより、背景画像がどのデバイスでも適切に表示されるようになります。

サンプル

別ページにサンプルを用意しましたので、ブラウザのウィンドウを縮めたり伸ばしたりしてみてください。

↓↓↓
テストページ

HTML

<div class="responsive-background">
        ここに画像が表示されます
    </div>

aspect-ratioを使用する場合

  .responsive-background{
    width: 100%;
    background-image: url('../img/mv.avif'); /* 画像のURLを指定してください */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 16 / 9; /* アスペクト比を保持してレスポンシブ */

ポイントですが、7行目のaspect-ratio: 16 / 9;　のように　を書くだけです。

簡単♪

aspect-ratio: 1 / 1;
aspect-ratio: 4 / 3;

のように比率を変えれば、画像の比率も変わります。

padding-topを使用する場合

width: 100%;
    height: 0;
     /* (画像の高さ / 画像の横幅) × 100 */
     padding-top: 50%; /* 2:1のアスペクト比 */ 
    /* padding-top: 56.25%; */ /* 16:9のアスペクト比の場合 */ 
    background-image: url('../img/mv.avif'); /* 画像のURLを指定してください */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

aspect-ratioが出てくるまでは、こちらのやり方が一般的でしたので、念のため掲載しています。

こちらはheightを0にして、padding-top（bottomでもいけます）で高さを保つように設定しています。

paddingは50％や56.25%のように%で指定することで、親要素のwidthを基準に比率を保ったまま可変してくれるという特性があるのでそれを利用しています。

はじめてこれを教えてもらったときは、絶対に自分じゃ発見できないなと思いましたよホント。

しばらくメモッときましたし。

ちなみに、コーディングの修業を行っている際に、padding-topではなく、padding-bottomで高さを保っているサイトがあったので、試してみたところ全く同じでした。

デバイスによって比率を変える場合

ほとんどのコンテンツの場合、背景画像の比率はＰＣとスマホで同じものを使っても違和感がないのですが、メインビジュアルに使う画像の場合は比率を変えたいなんて場合があります。

そんなときには、メディアクエリを追加することで、デバイスによってアスペクト比を変更することも可能です。

background-positionで位置を変えることも可能なので、背景画像でobject-fitのような使い方もできますが、画像の場所を選んでトリミングするような場合は、スマホ用にimgタグを用意して、object-fitでやった方がうまくいくこともあります。

そのへんは臨機応変に対応してください。

 /* aspect-ratioを使用 */
@media screen and (max-width: 768px){
    .responsive-background {
      aspect-ratio:　1 / 1 ; /* 1:1のアスペクト比 */
    }
}

@media screen and (max-width: 768px){
 /* padding-topを使用 */
    .responsive-background {
     padding-top: 75%; /* 4:3のアスペクト比 */
    }
}

imgタグではなくbackglound-imageを使って画像を表示したいなんてときに使えます。