object-fit & object-position

The same 2:1 image placed in a 120×120 box. Corner markers (red/green/yellow/white) and the center dot make the fit and crop obvious.

object-fit

object-fit: fill

object-fit: contain

object-fit: cover

object-fit: none

object-fit: scale-down

object-position (with object-fit: cover)

object-position: left

object-position: center

object-position: right

object-position: top

object-position: bottom