CSS object-fit property

Definition and Usage

The objectFit property is used to specify how the size of <img> or <video> should be adjusted to fit its container.

This property informs how the content fills the container. For example, 'Keep aspect ratio' or 'Expand and occupy as much space as possible'.

See Also:

CSS Tutorial:CSS object-fit

CSS Reference Manual:CSS object-position

HTML DOM Reference Manual:objectFit Property

Example

Crop the sides of the image, maintain the aspect ratio, and then fill the space:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Try It Yourself

CSS Syntax

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Property Value

Value Description
fill Default Value. Resize the replaced content to fill the content box of the element. If necessary, the object will be stretched or compressed.
contain Scale the replaced content to maintain its aspect ratio while fitting into the content box of the element.
cover Resize the replaced content to maintain its aspect ratio while filling the entire content box of the filling element. The object will be clipped.
none The replaced content will not be resized.
scale-down The size of the content is the same as none or contain, depending on which of the two gets the smaller object size.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default Value: See the individual properties.
Inheritance: No
Animation Production: Not supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.objectFit="cover"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0