# Object Fit

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.

## 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.

## Scale Down

the image will compare the difference between none and contain in order to find the smallest concrete object size.

## None

image will ignore the height and width of the parent and retain its original size.

## Object Position

Use object-position: 50% 100%