背景画像をレスポンシブに対応させる、縦横比を維持して領域内に納めたり領域を埋めたりする

2017年9月17日

レスポンシブデザインで背景画像を使用したいとき、縦横比を維持して表示領域に合わせる為にはどうするか。
サンプルはウィンドウ幅を変えてみるとわかりやすい。

  • background-size: cover;
  • 表示領域を覆う最小サイズになるように拡大縮小する
  • background-size: contain;
  • 表示領域に収まる最大サイズになるように拡大縮小する
  • background-size: 横指定 縦指定;
  • 固定値(px等)、パーセント、autoで指定する

coverをつかって表示領域を覆う

CSS

  1. .p-bgCover {
  2.     background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
  3.     background-size:cover;
  4. }

HTML

  1. <div class=”p-bgCover”></div>

sample

領域のサイズwidth100% height 100px 背景画像サイズ640x435

containを使って領域に納める

CSS

  1. .p-bgContain {
  2.     background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
  3.     background-size:contain;
  4. }

HTML

  1. <div class=”p-bgContain”></div>

sample

領域のサイズwidth100% height 100px 背景画像サイズ640x435

横と縦を指定する

CSS

  1. .p-bg30Auto {
  2.     background:#ccc url(/images/sample/fox.jpg) center center no-repeat;
  3.     background-size:30% auto;
  4. }

HTML

  1. <div class=”p-bg30Auto”></div>

sample

領域のサイズwidth100% height 100px 背景画像サイズ640x435