http://o.inchiki.jp/obbr/242
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を指定した場合はアスペクト比を維持したサイズが自動的に決定される。
- 横、縦伴に値を指定した場合、アスペクト比は考慮されない。