DevTut

# Object Fit and Placement

# object-fit

The object-fit property will defines how an element will fit into a box with an established height and width. Usually applied to an image or video, Object-fit accepts the following five values:

FILL

object-fit:fill;

object-fit:fill; (opens new window)

Fill stretches the image to fit the content box without regard to the image's original aspect ratio.

CONTAIN

object-fit:contain;

object-fit:contain; (opens new window)

Contain fits the image in the box's height or width while maintaining the image's aspect ratio.

COVER

object-fit:cover;

object-fit:cover; (opens new window)

Cover fills the entire box with the image. The image aspect ratio is preserved, but the image is cropped to the dimensions of the box.

NONE

object-fit:none;

object-fit:none; (opens new window)

None ignores the size of the box and is not resized.

SCALE-DOWN

object-fit:scale-down;

Scale-down either sizes the object as none or as contain. It displays whichever option results in a smaller image size. object-fit:scale-down; (opens new window)

# Remarks

The properties object-fit and object-position are not supported by Internet Explorer.

← CSS design patterns →