CSS object-fitProperty
Example
Crop the image while preserving the original aspect ratio.
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
Try it Yourself »
Tag definition and usage instructions
The object-fit property specifies how the content of an element should fit the height and width of the specified container.
The object-fit property is generally used on img and video elements. For these elements, it can perform cropping, scaling (while preserving the original aspect ratio), or direct stretching.
You can by usingobject-positionAttribute to switch the alignment of the replaced element's content object within the element box.
| Default Value: | fill |
|---|---|
| Inherited: | None. |
| animation: | None.AboutCSS Animations |
| version: | CSS3 |
| JavaScript Syntax: | object.style.objectFit="cover" Try it Yourself » |
Browser Support
The numbers in the table represent the first browser version number that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Syntax
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Property value
| Value | Description | Try it Yourself |
|---|---|---|
| fill | Default. Does not guarantee preserving the original aspect ratio. The content is stretched to fill the entire content container. | Try it Yourself » |
| contain | Preserves the original aspect ratio. The content is scaled. | Try it Yourself » |
| cover | Preserves the original aspect ratio. However, part of the content may be cropped. | Try it Yourself » |
| none | Preserves the original width and height of the element's content, meaning the content will not be resized. | Try it Yourself » |
| scale-down | Preserves the original aspect ratio. The content's size is the same as that of either none or contain, whichever results in a smaller object size. | Try it Yourself » |
| initial | Set as default value,Aboutinitial | |
| inherit | Inherit the attribute from the parent element of this element.Aboutinherit |