• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2018/08/29

書いた人:
rurippa!
カテゴリ:
CSS   HTML
317 views

backgroundで表示した画像を、レスポンシブ対応する方法を紹介します!

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


背景画像の比率を保ったまま、レスポンシブ対応する方法を紹介します!

目次

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を使いたい場面に出くわすこともあるかと思います。
そのときは、ぜひお役立てください♪


この記事を読んだ人はこんな記事も読んでいます

<

>