[CSS3] 背景画像のサイズ指定

CSS3で、で背景画像のサイズ指定が出来るとはじめて知った。⇒ background-size

背景画像のサイズ指定はbackground-sizeにauto, contain、cover、または横と縦の長さを指定。縦は省略可能。省略時の既定値はauto

縦横指定値は、ピクセル値(px)、文字に対する比率(em)、コンテナに対するパーセンテージ('%')のほか、auto。

contain、coverは、画像のアスペクト比を保持したまま、コンテナ内にうまく収まるように調節されるのだが、画像とコンテナのアスペクト比が違う場合、containは、画像がコンテナ外にはみ出す可能性があり、coverは逆に繰り返される可能性がある。

背景画像に対してコンテナが横長

auto
100% auto
auto 100%
cover
contain

背景画像に対してコンテナが縦長

auto
100% auto
auto 100%
cover
contain

---

都議会の「セクハラやじ」の報道ですけど、どうしても「セクハラおやじ」と読んでしまいますねー。