How to use CSS object-fit to control your images

in this week's five minute Friday we're gonna be looking at object fit which is a really cool CSS property that lets us treat our images sort of like background images hi my name is Kevin here my channel we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and every Friday we do a 5-minute Friday where we explore something in five minutes or less so as I just said before we're gonna be looking at object fit really useful property that we can use it gives us a lot more control over our images that we never used to have I don't find them using it all the time but it's one of those really good ones the to have is knowing that it exists because all of a sudden the perfect opportunity for it will arise and it's it's a really cool property so let's start the timer and check it out so object fit is something that I use from time to time but from the feedback I get a lot of people aren't aware of it object fit sort of lets us treat our images like we would background images in the sense that we can use things like cover and contain on an image and it will work exactly like it does on a background image which in certain circumstances really is amazing it's a little bit strange though because it doesn't rely on the parents dimensions but instead that of the image itself so in general you'd be using this while setting a fixed width or more likely a fixed height on an image and of course that fixed height could be in something like viewport units or something like that but yeah there are it doesn't work in every single situation um so here we have an image and we get this regular sort of thing I have it enough card with no content so a common thing here would be to do something like max with 100% do you get it to shrink down but then you know maybe you go well I want this to actually have a height of 150 pixels like something I would shrink the whole thing and I want it to stretch the whole size and because this is a max width it's letting it get smaller than that so you go actually I want to put just a width on here album and that that's stretching my image it's not what I want to do well that's where your object fit can come in so just like a background image now I can do a cover so to show you the difference if I turn that off and it's stretching it and if I turn it back on its cropping my image and just like a background image where we get our background position we can do an object position and on my oblems no one knows from my object position here I could say top left and I'll get the top left of my image or I can give this actual things it works just like a background a position would work another option that you have here instead of cover we can do here is contain which will contain it so the difference between cover will make sure that my entire this entire dimension is being filled with the content and will prop it they contain it's just like you can do on a background image it's going to can make sure the entire image is visible so there's nothing from the image that will be missing so a big thing contain I don't use very often but every now and then it has its uses another value we have is called Phil so Phil just sort of looks as if there was nothing it wasn't actually doing anything it just stretches it to fit exactly with what we're saying here what an interesting one is none none and we'll actually just keep it at the original one so if I switch this over to cover they both end up cropping it in this case you can see cover is cropping it but it's gonna shrink my image to fit those 500 by 500 and if I came here and I switch this to like 750 it's it's gonna stretch my image it's making sure the image is always filling that space whereas if I put this back to none it's keeping it as a 500 pixel by 500 pixel image but it's cropping off the top and the bottom of it because it's gonna fit those dimensions so that one could be interesting every now and then if you don't want to resize an image and you just want to like show parts of it that one could be really useful another kind of strange one is scaled down and scaled down scale down is kind of interesting you will act like contain except it won't grow the image larger than the size of the original dimensions and it's a little bit like having a max width 100% max height 100% so here it's whichever is smaller it's so it's either going to use the contain which it looks like now or it's going to use none so let's just put this back to scale down and then say it changed this to like 1500 pixels oops 1500 pixels now it's maxed out at this 500 by 500 pixel area so it sort of gives it a max width and max height according to the original dimensions of the image but if the area the image isn't is smaller then it will act like contain so it's a little bit of a weird property now just a really quick word for a browser support browser spore it's really good it's even in Opera Mini which is really really cool the only thing is yeah Internet Explorer obviously not supported that sort of sucks and edge you'll notice has partial support and this is because for all of these other ones it works for video tags as well as images whereas for edge it will only work for images so just a few things you might want to take into consideration and that's object fit I hope you liked it and it's one of the properties that when I first discovered it I was just sort of blown away how come I didn't know about this sooner so if you didn't know about it I hope this helps you out or maybe it was just a nice little quick reminder about it and how it works and there's a few little values in there you you might not have known about that working sort of strange in awkward ways if you have any good uses for a couple of those more weird ones that aren't cover I'd love love you to share down in the comments below because I find I just use cover and that's about it but that's it for this video so have yourselves an amazing weekend thank you so much for watching I massive thank you to my patrons who help support this channel and of course until next time don't forget to make your corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 211,792

Rating: 4.9109817 out of 5

Keywords: Kevin Powell, tutorial, html, css, object-fit, css object-fit, css image control, #fiveminutefriday

Id: 6yAAV-uP0po

Length: 6min 0sec (360 seconds)

Published: Fri Oct 12 2018