CSS object-fit Property
The CSS object-fit property specifies how to resize an image or video to fit its content box. This property specifies how to fill the content inside the content box or container, such as maintaining the aspect ratio or stretching up and lifting up as much space as possible, and so on. The object-position property allows you to change the alignment position of the replaced element's content object within the element's box.
Syntax
Property Values
| Value | Description |
|---|---|
| fill | This is the default setting. The replaced content is sized to fill the content box of the element. The object will be stretched or squished to fit if necessary. |
| contain | The replaced content is scaled to keep its aspect ratio while fitting within the content box of the element. |
| cover | The replaced content is sized to maintain its aspect ratio while filling the entire content box of the element. The object will be clipped to fit the space. |
| none | The content that has been replaced is not resized. |
| scale-down | The size of the content is calculated as if none or contain were specified (would result in a smaller concrete object size). |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 36.0 | 7.1 | 16.0 | 19.0 |