【CSS】背景画像：要素幅Max&レスポンシブ表示

CSSコード

背景imgのアスペクト比を維持できるレスポンシブ表示。

div{
  background-image: url(img.png);
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding-top: calc((img縦サイズ / img横サイズ) * 100%);
}

imgは要素内いっぱいに表示させたい為background-size: cover;を指定。

imgを要素幅に合わせるためwidth: 100%;を指定。

重要なのがpadding-topで、ここで画像のアスペクト比を%指定しておく。

これにより要素幅が変わると画像のアスペクト比が維持されたままimgが拡大縮小する。

なぜ%指定のpadding-top？

paddingは要素のスペースに対してどのくらいの幅にするかを決めることができる。

padding-topは要素の横幅を参照する為、%指定すると「横幅に対する割合」となる。

例えば横1000px縦500px（アスペクト比2:1）のimgの場合padding-top: calc((500 / 1000) * 100%);とし、padding-topは50%となる。

• 要素の横幅1000pxの場合：ヨコ1000px × 50% = タテ500px　→　アスペクト比２：１
• 要素の横幅800pxの場合：ヨコ800px × 50% = タテ400px　→　アスペクト比２：１

このように横幅に合わせてアスペクト比が維持できる。

画像以外にもGoogleMapの埋め込み（iflame）等、アスペクト比を維持して表示させたいときに応用できる便利な呪文。