CSS object-fit Property
Example
Crop an image while maintaining its original aspect ratio:
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
Definition and Usage
The object-fit property specifies how the contents of an element should be resized to fit within its container.
object-fit is typically used with the img and video tags, allowing these elements to be cropped, scaled, or stretched while preserving their original aspect ratios.
You can use the object-position property to control the alignment of the replaced element's content within the element's box.
| Inherited: | No. |
|---|---|
| Animatable: | No. About CSS Animations |
| --- | --- |
| 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 | Chrome | Firefox | Safari | Opera | Edge |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Syntax
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Property Values
| Value | Description | Try it |
|---|---|---|
| fill | Default. Does not preserve the original aspect ratio; content is stretched to fill the entire content container. | Try it » |
| contain | Preserves the original aspect ratio; content is scaled. | Try it » |
| cover | Preserves the original aspect ratio but may crop the content. | Try it » |
| none | Retains the original dimensions of the element's content; content is not resized. | Try it » |
| scale-down | Preserves the original aspect ratio. The content's size is the same as either none or contain, whichever is smaller. |
Try it » |
| initial | Sets this property to its default value. About initial | |
| inherit | Inherits this property from its parent element. About inherit |