背景画像の拡大縮小

CSS の background-size プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。

1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。

これは以下の CSS を使うことで達成されます。

.square {
  width: 300px;
  height: 300px;
  background-image: url(fxlogo.png);
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
  background-size: 150px;
}

もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう background-size に接頭辞を付すことは必要ありません。

以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。

background-size: 300px 150px;

その結果はこのようになります。

この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。

.square2 {
  width: 300px;
  height: 300px;
  background-image: url(favicon.png);
  background-size: 300px;
  border: solid 2px;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。

CSS の background-size には、 <length> の値の他に、 contain と cover の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。

contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は　コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。

上の例の CSS は以下のようなものです。

width: 100%;
height: 200px;
background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
background-size: contain;
border: solid 2px;

cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。

この例では以下の CSS を使用しています。

width: 100%;
height: 200px;
background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
background-size: cover;
border: solid 2px;

• background-size
• background