Semantic portal
The object-fit Property
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
The CSS object-fit Property
The CSS 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".
img {
width: 200px;
height: 400px;
}
We see that the image is being squeezed to fit the container of 200x400 pixels, and its original aspect ratio is destroyed.
If we use object-fit: cover; it will cut off the sides of the image, preserving the aspect ratio, and also filling in the space.
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Another Example
Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height.
In the following example we do NOT use object-fit, so when we resize the browser window, the aspect ratio of the images will be destroyed:
<!DOCTYPE html>
<html>
<body>
<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>
</body>
</html>
In the next example, we use object-fit: cover;, so when we resize the browser window, the aspect ratio of the images is preserved:
<!DOCTYPE html>
<html>
<body>
<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>
All Values of The CSS object-fit Property
The object-fit property can have the following values:
-
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)
The following example demonstrates all the possible values of the object-fit property:
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}