CSSのbackground-sizeのオプション

Bootstrapのjumbotronに背景画像を指定する際、background-imageのオプションに関して勉強したので記載。

background-imageには、(直接パーセントやピクセル数で指定する以外に)下記3つのオプションがあるようです。

・auto
・cover
・contain

下記が、それぞれの内容です。

デフォルトはauto。この状態だと、設定した画像が表示できる領域よりも大きい場合は、そのまま切れて表示されます。

coverは、画像のアスペクト比を変更することなく、出来る限り大きくで表示するもの。

containは、画像を切り取ることなく画像を出来る限り大きく表示するもの。ただし、表示領域との差分がある場合、画像の上や横に余白が表示されることがあるもの。

勉強になりました。