Style objectFit Property
Example
Cut off the sides of an image, preserving the aspect ratio, and fill in the space:
document.getElementById("myImg").style.objectFit = "cover";
Try it Yourself »
Definition and Usage
The objectFit 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"
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Syntax
Return the objectFit property:
object.style.objectFit
Set the objectFit property:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
Property Values
| Value | Description |
|---|---|
| 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 |
| contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
| 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 |
| none | The replaced content is not resized |
| scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | fill |
|---|---|
| Return Value: | A String, representing the object-fit of an element |
| CSS Version | CSS3 |
Related Pages
CSS tutorial: CSS object-fit
CSS reference: object-fit property
