object-fit で img タグ内の画像を配置の仕方を調整するサンプル。

その1: img に対して大きな画像の場合

object-fit: fill (初期値)

img の大きさに収まるように画像を縮小します。
img と画像の縦横比が一致しない場合は、縦か横に引き伸ばされた
画像になる点に注意。

object-fit: contain;

画像の縦横比を保ちながら img の枠内に収まるように自動調整します。
img と画像の縦横比が一致しない場合は上下か左右に余白が生じます。

object-fit: scale-down;

画像が img よりも大きい場合は contain と同じになります。
画像の縦横比を保ちながら img に収まるように縮小して表示します。

contain と同じ。img に収まるように縮小表示。

object-fit: cover;

画像の縦横比を保ちながら自動調整します。
contain と異なる点は、img 内に余白ができないように調整します。
img と画像の縦横比が一致しない場合は画像の上下か左右をカットして
表示します。

img 内に余白ができないように表示。画像の上下がカットされている。

object-fit: none;

img の中央に原寸大で表示。大きな画像の場合はあふれる

その2: img 枠に対して小さな画像の場合

・scale-down のときに原寸大で表示する点に注意。
  img に合わせて拡大表示しません。

object-fit: contain;

img の大きさに合わせて拡大表示します。
画像の縦横比は保たれます。

object-fit: scale-down;

画像が img よりも小さい場合は img の中央に原寸大で表示します。
contain のように img 枠に合わせて拡大表示しません。

画像が小さい場合は拡大表示しません。none と同じです。

object-fit: none;

自動調整しません。
img の中央に原寸大で表示します。

img の中央に原寸大で表示

(2023/06-2024/03)
動作 : Edge120, Firefox120, Chrome119

◎ノート
・MDN: object-fit