The object-fit
property defines how an element responds to the height and width of its content box. It’s intended for images, videos and other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit
lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.
object-fit
can be set with one of these five values:
fill
: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.contain
: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.cover
: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.none
: image will ignore the height and width of the parent and retain its original size.scale-down
: the image will compare the difference betweennone
andcontain
in order to find the smallest concrete object size.