object-fit

The object-fit property designates how an <img> or <video> is resized within its container.

Syntax

The object-fit property’s value tells the content to fill the content in a variety of ways, as shown in the values listed below.

img.ex {
  height: 400px;
  object-fit: cover;
  width: 600px;
}

Values

fill
Default value. The replaced content is stretched or squished if necessary to fill its content box.

contain
The replaced content is scaled to maintain its aspect ratio while fitting within its content box.

cover
The replaced content is sized to maintain its aspect ratio while filling its content box, clipping (hiding) any overflow.

none
The replaced content is not resized.

scale-down
The replaced content is sized the same as none or contain, resulting in a smaller object size.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of object-fit? Submit a codepen.io demo and we'll showcase it here ↴