カテゴリー:
CSS
タグ:
 css cover contain

このエントリーをはてなブックマークに追加
更新日時:
2014年05月12日(月)
作成日時:
2014年05月12日(月)

前の記事 / 次の記事

参考:背景画像を描画領域の面積ぴったりに自動で合わせる方法

嵌まったのでまとめ。

要素の背景に背景画像全体を表示させる方法はいくつかあって、
そのそれぞれで表示のされ方が違う。

今回の要件

  • 背景画像は要素をはみ出さないこと。
  • 背景画像の全体が表示されること。
  • 背景を繰り返し表示する場合は縦方向に繰り返し、横方向には繰り返さない。
  • 上記の条件を満たすためにアスペクト比が維持できない時は、
    背景画像の全体が表示されなくてもいい。

目次

  1. coverを使う方法
  2. containを使う方法
  3. パーセントを使う方法(採用)
  4. 元画像を細工する方法
  5. 結論

1.coverを使う方法

background-image: url("sample.jpg");
background-size: cover;
  • 要素の背景を指定した画像で覆い尽くす。
  • 背景画像は1つだけ使われ、繰り返されない。
  • 画像の中に要素が内包されるイメージ。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • 要素が1枚の背景画像に内包され、要素の外側にはみ出した背景は表示されない。

2.containを使う方法

background-image: url("sample.jpg");
background-size: contain;
  • 要素の背景を指定した画像で敷き詰める。
  • 背景画像は1つ以上使われ、必要に応じて繰り返される。
  • 要素の中に画像が内包されるイメージ。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • 要素が1枚以上の背景画像を内包し、必ず画像の全体が表示される。

3.パーセントを使う方法(採用)

background-image: url("sample.jpg");
background-size: 100% auto;
// background-size: 横 縦;
  • 要素の背景を指定した画像で覆い尽くす、または敷き詰める。
    (要素のサイズを100%とし、背景画像を何%に拡大、または縮小するかを指定する。)
  • 指定が横縦伴に100%を超える場合、背景画像は1つだけ使われ、繰り返されない。
  • 横縦のサイズが伴に100%未満の場合、背景画像は1つ以上使われ、必要に応じて繰り返される。
  • 横の指定が100%で縦の指定がautoの場合、背景画像は1つ以上使われ、
    要素の縦のサイズが背景画像の縦のサイズを超えると繰り返し描画される。
  • 縦の指定が100%で横のサイズがautoの場合、背景画像は1つ以上使われ、
    要素の横のサイズが背景画像の横のサイズを超えると繰り返し描画される。
  • 割合の指定の仕方で、coverとしてもcontainとしても、また両者を合わせ持つ性質を持たせることができる。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • autoを指定した場合はアスペクト比を維持したサイズが自動的に決定される。
  • 横、縦伴に値を指定した場合、アスペクト比は考慮されない。

4.元画像を細工する方法

background-image: url("sample.jpg");

表示する要素のサイズが予め決まっている場合、
背景画像をその要素のサイズと同一になるようにリサイズしておくことで、
ジャストフィットさせることができる。

縦方向にだけ繰り返し表示させたい場合は
要素の横幅と画像の横幅がイコールになるようにリサイズする。

CSSに background-image の指定をするだけで対応できる。

5.結論

最初は4.の元画像を細工する方法にしようと思ってたんだけど、
bootstrap3に毒されてレスポンシブ脳になった結果、
やっぱり3.のパーセントで指定する方がいいかなと。