How does the object-fit property works on images
Hello guys, can someone explain how the object-fit property works on images, more precisely, what is the difference between the values it takes like cover and contain please
36 Replies
cover makes it so that the image will cover every pixel of the container, cropping the sides or top/bottom if necessary. contain makes it so that the entire image is visible inside the container as big as possible without cropping, but it might leave part of the container uncoveredJust to add to Jochems answer, both “cover” and “contain” maintain the original aspect ratio of the image. That is to say, the image won’t be distorted.
yes, good addition, thanks!
is there any useful case scenario where one is better than the other? Like why make use of cover if their will be empty spaces left
you can use both simultaneously. If you make a thumbnail gallery with both vertical and horizontal images in it, I'd set the foreground image to contain so you can see the entire thing, then have a background with cover and a blur applied so you always have the full thing covered with relevant pixels.
Generally, you'd use contain if the image is important, and cover if the image is just there to make the site look better
hmmm have a look at this picture for e.g, I'm trying to make an image gallery, for the image at the bottom, I use cover because when I use contain, what was happening is that the images were leaving empty pixels.... what can I add in order to use both the cover and contain property here please
I forget the details, but you pretty much have to duplicate the image and set one to contain and one to cover
oh I see what you mean
like in the big square, probably it will be cover right ?
I'd use contain because you'd want to see the entire image
you can use cover for the thumbnails
also, combine it with an appropriatedly-sized image
you don't want (or need) 16mpx images for thumbnails
to be clear: this is a choice, and yeah, a lot of people just use cover for thumbs
yup, but you can combine both: png thumbnails rendered in
contain mode (using some software for it) and then show it in coverwhen we use cover, if our image need to fill the container and it isn't big enough, the image is stretched? compare to contain which doesn't stretch it ?
no, it's zoomed in and cropped
"stretched" has a special meaning
ok ok I understand the zoom in, but for contain, what happens? it isn't zoom in ?
this is stetched
yep, with cover, you are right, the image wasn't "distorted"
stretched
the correct term is stretched
yeah sorry, stretched
it's important to use the right term
each term means something different
yep got it, sorry
I'm just confuse why when we use contain, we get the empty pixels
while cover just covers the whole container
contain is zoomed out until it fits, cover is zoomed out until it covers everything
because the full image is contained inside the size available
ahhhh I see
and images come in all sizes and proportions
yeah I see
I try to visualise the zoom out scenarios, I got it I think, just need to refresh..... is it correct to say the following:
So cover = zoom out until image fits container, this implies part of the image might be cropped.
while contain = zoom out until we fill the image without any missing part; this is why we get the empty pixels
no, cover will zoom in
https://codepen.io/Fakeur/pen/BaXPjoB
In this codepen, the first 2 images uses cover and the third one uses contain... I don't understand how the first 2 images are different... they both use cover but are their any difference between them ? I'm not able to visualise the zoom in effect 🥲 we zoom in/out with respect to the original dimensions of the image ?
the entire left side is missing on the
cover images
and the right side tooyeah, the thing is both the first and second image are the same even though their containers have different dimensions, why is the reason for that please
like I expect the second image to have more sections being cropped but this isn't the case, it has the same section as the first one
simply because the containers have different dimentions, but same proportions
200x200 and 600x600 are different, but the proportion between the width and height is still 1:1
so, you will see exactly the same zone, for the same exact image
ahhh I see
makes sense now?
this is what we mean by aspect ratio ?
yeahhh makes more sense, I'm just refreshing all of what I learn just to make sure it's well ordered in my head 😂
yes, aspect ratio is the ratio between the width and height
that makes sense