auto画像本来の寸法を使う
初期値はauto autoです。内在的な幅と高さを持つ画像は、その大きさと縦横比を基準に表示されます。
background-size
要素の背景画像の大きさを決めるプロパティ。全体を見せるか、枠を埋めるか、元の大きさを使うかを切り替えて比べます。
遊んでみよう
背景画像は360px × 200px・表示枠は260px × 220px
CSS
.element background-size: cover;
値のパターン
background-sizeの構成要素
cover | contain枠を埋めるか、全体を見せる
coverは枠を完全に覆うまで拡大し、containは画像全体が枠内に収まるまで拡大・縮小します。
<width> <height>幅と高さを個別に指定する
長さや割合を1つ書くと幅だけを指定し、高さはautoになります。2つ書くと幅、高さの順です。
早見表
初期値はauto autoです。画像の縦横比を保つならcover・contain・片方をautoにした長さ指定を使います。
01
auto画像本来の大きさ初期値02
cover枠全体を覆う切り抜きあり03
contain画像全体を表示余白あり04
180px auto幅を固定して比率を保つ長さ05
60% auto枠の幅を基準にする割合06
100% 100%枠と同じ寸法へ伸縮比率が変わるよくある使い方
01
ヒーロー画像で枠全体を埋める
画面幅に合わせて変わる領域をcoverで覆うと、余白を出さずに背景画像を大きく見せられます。
.hero { background-size: cover; background-position: center; }02
ロゴや図を切らずに表示する
画像全体を見せたいときはcontainを使い、必要に応じて背景色で残った余白を整えます。
.logo-panel { background-size: contain; background-repeat: no-repeat; }03
背景パターンの1枚を小さくする
模様の1単位へ長さを指定すると、背景画像を繰り返す細かさを調整できます。
.pattern { background-size: 48px 48px; }ポイント
画像の大きさと、要素の大きさは別もの。
background-sizeは背景画像だけを拡大・縮小し、要素のwidthやheightは変えません。先にbackground-imageで画像を用意し、繰り返しはbackground-repeat、見せる位置はbackground-positionで調整します。複数の背景画像にはカンマ区切りで画像ごとの値を指定できます。初期値はauto auto、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。coverでは画像の一部が切れ、containでは背景色が見える余白が残ることがあります。
関連するCSSも見てみよう。
background-size と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。