CSS

2017/03/28

CSSで背景画像の拡大縮小が可能です。

background-sizeプロパティを使うことでブラウザ再座の拡大縮小に伴って画像サイズを自動で縮小拡大してくれます。このサイトのイメージ画像はpro.foto.ne.jpさんのhttps://pro.foto.ne.jp/free/product_info.php/cPath/21_50_116/products_id/4589でダウンロードしたもの使わせていただいております。キーボード打ってる写真です。4200px×2800pxのかなり大きな画像です。

ブラウザのサイズを変更していただくとわかりますが、ブラウザのサイズいかんにかかわらず表示されている画像のエリアはほとんど同じです。テキストが折り返すと高さが変わりますので、背景が表示される領域の高さが高くなることがあります。その場合は少し下の方も表示されます。

background-sizeはcss3で規定されており、私はあまりなじみがありませんでした。

can i useによればIE11のころからつかえていたんですね。もうそろそろIEを気にせずにCSSを使いたいところです。

では、使い方ですが、background-sizeによれば

background-size:の後ろの値は

数値指定

contain

cover

の3つのうちのどれかが指定できます。初期値はautoが指定されているようですので上書きする際はautoを指定してあげると初期設定に戻るのでしょう。

数値指定は幅、と高さの2つが指定できます。

以下の説明に使う元画像（表示を横200pxに指定）

background-size指定なし

まず横200px高さ200pxのdiv要素を作ります。背景に4200px×2800pxの画像を指定します。ほとんど見えていない状態です。指定したcssは以下のようになります。

width:200px;
height:200px;
background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);

background-size:数値指定

次はbackground-sizeを設定しています。200px×200pxの中に背景画像を幅200px、高さ100pxで設定しています。元画像が横と縦が1.5対1（4200px×2800px）の割合です。少し横長に引き延ばされています。

width:200px;
height:200px;
background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);
background-size:200px 100px;

background-size:数値指定2

上と同じように数値で指定していますが幅200pxとしていますが高さを指定していません。数値指定で第2引数を省略した場合はautoが指定されたこととなります。幅200pxに対して元の縮尺が適用され約133pxの高さとなります。DIV要素は高さ200pxありますので残り約67pxの高さ分だけもう1回画像が表示されています。

width:200px;
height:200px;
background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);
background-size:200px;

background-size:contain

数値指定ではなくcontainを指定しました。containは縦横比を保持した状態で納められる最大のサイズになります。これは背景画像がすべて見切れずに入る最大サイズとなるります。この画像は横幅の方が広いので横が切れなければ高さも切れることがありませんのでbackground-size:200px (auto);と同じことになります。

width:200px;
height:200px;
background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);
background-size:contain;

background-size: cover

coverを指定しました。coverは縦横比を保持した状態で狭い方が全部表示さるような状態です。元画像を見ていただくと幅と高さでは高さの方が狭いです。狭い方を目いっぱいに表示します。ここは、実際に何度か試していただければわかるのですが縦横の狭い広いよりも背景画像を繰り返さない方向で指定された範囲で目いっぱい表示する感じです。縦か横かのどちらかがいつでも全部表示される状態です。

width:200px;
height:200px;
background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);
background-size:cover;

このサイトの場合

おそらくサイト作成時に困るのが横幅の問題だと思います。縦はコンテンツが伸びていけばいいだけですので困りませんが幅はどのようなモニタ環境かわかりません。現在は恐ろしく解像度の高いモニタもあるようなので960px幅で残り左右200pxずつくらいで1400pxの画像を背景にしておけば大丈夫などというようなことにはなりません。1920pxや3200pxや4kテレビをモニタにするとか（やったことありませんが）すれば横幅いくらまで対応せんといかんのや！ってことになります。

元画像が横4200pxあるので大抵大丈夫だと思うのですがそれに合わせるとスマホなどではほんの一部の画像しか表示できなくなってしまいます。このサイトの場合たいていの場合は横長に表示されると思われるので以下のような設定にしています。

background-image: url(http://www.netkansai.com/contents/images/haikei.jpg);
background-repeat: no-repeat;
background-position: right center;
background-size: cover;

background-repeat: no-repeat;はあってもなくても関係ないと思われます。念のためというか癖ですね。

background-position: right center;を指定していないと画像の左上が表示エリアの左上に合うので横長の場合、手の部分が表示されなくなってしまうので垂直位置をcenterにしました。水平位置のrightは気休め程度いつでも頭の片が映っていてほしいからです。centerだけの指定でいいのかもしれません。

皆さんも便利なbackground-sizeを活用してみてください。