CSS object-fit Property
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;
}
Try it Yourself »
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".
| 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
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
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 |
Related Pages
CSS tutorial: CSS object-fit
CSS reference: CSS object-position
HTML DOM reference: The objectFit property
