The object-fit property specifies how an image fits its container.
The image may be scaled down, shown fully, or cropped to make it fit.
The object-position property is often used to set the image position.
The image is stretched to the specified height and then cropped using object-fit: cover.
<style>
.image-fit {
object-fit: cover;
width: 150px;
height: 350px;
border: 2px solid teal;
}
</style>
<img src="/img/css/the-sower-sm.jpg" class="image-fit">
<br />
<br />
Original Image:
<br />
<img src="/img/css/the-sower-sm.jpg">
Note: object-fit can also be used on video elements.
object-fit: fill | contain | cover | scale-down |
none | initial | inherit;
| Value | Description |
|---|---|
| fill | Default. Resizes the image to fill the content box. Aspect ratio is not maintained and image may appear stretched or compressed. |
| contain | Resizes image to fit inside the content box. Aspect ratio is maintained. If there is no perfect fit, some open areas will result. |
| cover | Resizes image to fill the content box. Excess content will be cropped. Aspect ratio is maintained. The entire content box will be covered. |
| scale-down | The image is resized as if none or contain were specified. The smallest image size will be used. |
| none | Does not change the image size. The browser decides the best position. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different object-fit values.
<style>
.image-example {
object-fit: scale-down;
width: 200px;
height: 350px;
border: 1px solid #666;
}
</style>
<img src="/img/css/the-sower-sm.jpg"
class="image-example" />
This table shows when object-fit support started for each browser.
 Chrome
|
31.0 | Nov 2013 |
 Firefox
|
36.0 | Feb 2015 |
 IE/Edge
|
16.0 | Sep 2017 |
 Opera
|
19.0 | Jan 2014 |
 Safari
|
7.1 | Sep 2014 |
