background-size: contain に出会った

• Demo

background-size プロパティに contain という値がある。
この値は、幅と高さの両方がコンテンツ内に収まるように指定した背景画像を拡大縮小する。コンテンツの幅と高さが背景画像の縦横比と異なった場合、contain では背景画像の縦横比を保持したまま表示する。

.box-a {
  background-size: contain;
}

background-size: 100% 100% を指定しても同じようにコンテンツサイズいっぱいに画像が出せる。（padding なんかを取ってる場合は background-origin: content-box を同時に指定してあげれば良い。）
ただこの指定で背景を出した場合はコンテンツサイズと背景画像のサイズが異なった場合、画像側の比率が崩れる。

.box-b {
  background-size: 100% 100%;
  background-origin: content-box;
}

ちなみに背景画像の幅だけを指定した時（ height が auto ）にコンテンツサイズと背景画像のサイズが異なった場合、これは画像の比率を保ったままコンテンツ枠を飛び越えて表示される。

.box-b {
  background-size: 100%;
  background-origin: content-box;
}