背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。
CSS
.sample {
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(images/tanuki.jpg) center center no-repeat;
background-size: cover;
width: 100%;
height: 500px;
padding-top: 62.5%;
}
表示サンプル
サンプルhtml
背景画像の縦横比率を維持したままコンテンツの幅に合わせて表示のサンプル
各プロパティの説明
サンプルでは、800×500pxの画像を背景画像としています。
プロパティでポイントになる部分を解説していきます。
background-size: cover;
background-size とは、背景画像のサイズを指定するプロパティです。
なので background（background-image）に対してのみ有効です。
指定する値は、autoが初期値で、ピクセル、パーセント、cover、containを指定する事ができます。このうち、ピクセルとパーセントは他のプロパティでもよく使うので省略しますが、coverとcontainはこの background-size 独自の値になります。
この2つの違いは以下の通りです。
- cover：縦横比率を保持して、表示領域を完全に覆うように表示
- contain：縦横比率を保持して、表示領域内で画像がすべて収まるように表示
他のプロパティの記述によっては、どちらの値を使用しても良いのですが、containの場合、表示領域の背景色が見えてしまう事があるので、今回のような場合には、cover を使った方が良いと思います。
padding-top: 62.5%;
padding をパーセントで記述する事で、背景の高さを確保しています。
この値は画像のアスペクト比から算出します。
計算式は以下のようになります。
画像の高さ ÷ 画像の幅 × 100
サンプルの場合は、幅800px、高さ500pxですから、上記の式に当てはめると、
500 ÷ 800 × 100 = 62.5（％）
となり、padding-top: 62.5%; になるわけです。
画像サイズが割り切れない場合は、小数点以下2〜3桁あたりで切り上げると良いかと思います。
なお、padding-top は padding-bottom としても大丈夫です。
box-sizing: border-box;
プロパティの記述順とあっていませんが、box-sizing の説明です。
box-sizing は、ボックスサイズの算出方法を指定するプロパティで、content-box と border-box という値があります。
- content-box：border と padding を幅と高さに含めない
- border-box：border と padding を幅と高さに含める
サンプルでは、height を指定しているので、このプロパティを使う事で padding の分高さが広がってしまうのを回避しています。
height を指定していない、もしくは0にしている場合には、必要ないかもしれません。
また、スマホ対応が必要な時には、ベンダープレフィックスを付けた方が良いです。
height: 500px;
これは単純に元画像の高さです。
height を入れないと、元画像の幅よりもブラウザサイズを小さくした時に、画像が縮小されてしまうため、記述してあります。
画像が縦方向に縮小しても良い場合には特に必要ありません。
さいごに
最近のWeb制作では、スマホ対応やレスポンシブ対応といった案件がとても増えてきています。その際にこの background-size は非常に有用なプロパティの一つであるといえるでしょう。
ただし、企業系のWeb制作の多くは、いまだにIE8からの対応を求められる事があり、background-size プロパティはIE8以下に対応していませんので、そのままでは使う事ができません。
そのような場合には、JavaScript をゴリゴリ書いて対応するか、jQuery プラグインなどを探して対応するしかないようです。