CSS object-fit
Are you wondering why the images you use in your website looks stretched or compressed?
A website may have multiple images each one being different sized. Each of the image may have different aspect ratio which do not match the aspect ratio of container or element which holds the image. So, if we set the width and height of the container which don’t match the aspect ratio of the image then the image might look stretched or compressed. So, to tackle this scenario object-fit comes in to play.
CSS object-fit
So, what is object-fit property? CSS object-fit property resizes the image to make it fit inside the container. The default value for object-fit is “fill”, which will fill the container by stretching and compressing the image.
Possible values for object-fit
- none
- fill
- contain
- cover
- scale-down
Code
<div class="container">
<div>
<p>Original Image</p>
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fG5hdHVyZXxlbnwwfHwwfHx8Mg%3D%3D" />
</div>
<div>
<p>Object Fit Property Applied</p>
<img
src="https://images.unsplash.com/photo-1444464666168-49d633b86797?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fG5hdHVyZXxlbnwwfHwwfHx8Mg%3D%3D"
alt="image of a bird"
class="objectfit" />
</div>
</div>object-fit: none
If the element is set to object-fit none the image will ignore the parent’s aspect ratio and will remain in its original aspect ratio.
Consider the red border as the height and width of the container (image tag). The container’s width and height are not proportional to the aspect ratio of the image as shown in the original image. object-fit none will generally make the image to stay in its original aspect ratio. The image will not be resized or compressed. So, you may ask then where is the other part of the image. The image is cropped without resizing.
.objectfit {
width: 300px;
height: 250px;
border: 5px solid red;
object-fit: none;
}Get Jagannathan R’s stories in your inbox
Join Medium for free to get updates from this writer.
object-fit: fill
It is the default value for the object-fit property. The image will be resized that is squeezed or compressed to cover up the container’s width and height. This will make the image looked to stretchy and squeezy.
You notice from the above image that right side image looks stretched a bit after applying “object-fit: fill”. This is because the container’s aspect ratio is not proportional to the image’s aspect ratio.
.objectfit {
width: 600px;
height: 250px;
border: 5px solid red;
object-fit: fill; //default value
}object-fit: contain
It makes the image fit into the container width and height by preserving the original aspect ratio of the image. Generally, it does not crop the image.
The above image clearly shows that “object-fit: contain” preserves the aspect ratio of the image and make it fit inside the container.
.objectfit {
width: 600px;
height: 250px;
border: 5px solid red;
object-fit: contain;
}object-fit: cover
It is similar to “object-fit: contain” makes the image fit into the parent container by maintaining the aspect ratio of the image but it will crop the image to fit into the container if the image aspect ratio doesn’t match the parent’s aspect ratio.
.objectfit {
width: 600px;
height: 250px;
border: 5px solid red;
object-fit: cover;
}object-fit: scale-down
The image will be sized by comparing none or contain and smallest fit will be picked up.
.objectfit {
width: 600px;
height: 250px;
border: 5px solid red;
object-fit: scale-down;
}Conclusion
Apart from “object-fit” property there are other properties such as object-position, background-size which can be used together to make the images even more responsive and fit into its parent container. Thank you for spending some your valuable time reading my article.
