CSS object-fit Property

❮ Previous Complete CSS Reference Next ❯

Example

Cut off the sides of an image, preserving the aspect ratio, and fill in the space:

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

Definition and Usage

The object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

Show demo ❯

Default value:	see individual properties
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.objectFit="cover" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
object-fit	31.0	16.0	36.0	7.1	19.0

CSS Syntax

Property Values

Value	Description	Demo
fill	This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit	Demo ❯
contain	The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box	Demo ❯
cover	The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit	Demo ❯
none	The replaced content is not resized	Demo ❯
scale-down	The content is sized as if none or contain were specified (would result in a smaller concrete object size)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS object-fit

CSS reference: CSS object-position

HTML DOM reference: The objectFit property