fill (default)

The default is fill, which tells the image to fill the entire box and ignore its own aspect-ratio. This is the effect we have known since time immemorial.

contain

The contain value tells the image to shrink or enlarge itself until it fits in the box while maintaining its aspect-ratio.

cover

The cover value tells the image to shrink or enlarge itself until it fills up the box completely while maintaining its aspect-ratio. This usually results in only part of the image being shown.

none

The none value tells the image to ignore the box and retain its own size. This may result in the image not filling up the box or sticking out of it.

scale-down

The scale-down value tells the image to compare the results of none and contain and choose the one that results in the smallest image. In this test page that would be contain.

object-position

If an image does not coincide exactly with its box, it should be possible to position it somewhere; for instance in the lower right corner. All images below have object-fit: none and are positioned at various spots in the box.