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

background-imageを使ってレスポンシブ？

例えば、写真の上にテキストやイラストがのっているときに、
その写真の比率を保ったまま可変することが、できるようになります。

サンプル

サンプル写真をbackground-imageで表示し、
横幅100%でレスポンシブしてみました。
（実際にブラウザのウィンドウを縮めたりしてみてくださいね）

      <div class="box"></div>

      <style>
        .box{
          width: 100%;
          height: 0;

          /* (画像の高さ / 画像の横幅) × 100 */
          padding-top: 66.6666666667%;

          background: url(画像のパス);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      </style>
      

ポイント解説

height: 0;にしていますが、その分padding-topを使って高さを保っています。
また、%を使うことで比率を保ったまま可変できるようになる仕組みです！
padding-topの数値は (画像の高さ / 画像の横幅) × 100 で求められます。

押さえておきたいポイント（padding-topについて）

結構間違えられやすいと思うのですが・・・。 　　　　　　　　　　
padding-topと、padding-bottom（marginも同様）に％を使うとき、
親要素のよこ幅（width）が基準となっているんです。

…ん？？　となっている方のために、例を出します！
例えば、width:300pxの親要素の中に、width:200pxの四角があるとします。

その四角にpadding-top: 100% をつけると、親要素のwidthが基準なので四角の高さは300pxになります。
同様に　padding-top: 50%なら高さが150pxになるのです。

この仕組みがわかると、今回のCSSも理解しやすいと思います(^^)

最後に

レスポンシブやスマホコーディングが多くなっているので、どうしてもimgタグではなくbackgroundを使いたい場面に出くわすこともあるかと思います。
そのときは、ぜひお役立てください♪