object-fit

値の意味

• fill（初期値）は枠いっぱいに引き伸ばします。縦横比が違うとゆがみます。
• contain は縦横比を保ったまま、全体が収まる最大の大きさにします。余白ができます。
• cover は縦横比を保ったまま、枠をすき間なく覆います。はみ出した部分は切り取られます。
• none は元の大きさのまま置きます。
• scale-down は none と contain のうち小さくなるほうです。小さな画像を引き伸ばさずに済みます。

枠の大きさを決めておく

object-fit が効くのは、画像の縦横比と要素の枠の縦横比が違うときだけです。width と height の両方（または aspect-ratio）で枠を決めておきましょう。片方だけだと、枠のほうが画像の縦横比に合わせて決まり、違いが出ません。

関連するプロパティ

• 置く位置は object-position で変えられます。初期値は中央（50% 50%）です。
• 効くのは img video などの置換要素だけです。背景画像には background-size の cover / contain を使います。
• このページのプレビューでは、箱の中に見本の画像（96×96 の正方形）を置き、箱に書いた値を画像に渡しています。箱の右下をドラッグして縦横比を変えると、違いがよくわかります。