Kevin, you can actually use it even in ie with the help of some tiny js libraries which mirror functionality of object-fit in ie. They are using some font-family hack to allow this and it works great.
@@KevinPowell I've always known these little helpers as "shims". Now that I build my own projects and don't build for clients anymore, i focus purely on modern browsers and don't bother with IE.
@@eugenhildt910 I usually don't support IE either, but recently had to do a project for a company that really wanted to have exactly same experience in all browsers. And for that project, the js solution for object-fit was a real saver.
I've never had any problems with edge. To me it seems to work just the same as all the other modern browsers. There are media queries that target edge spefically so if something doesn't work 100% you can still do a fall back option. I no longer support I.e versions below edge. I just put in a custom message that pops up saying the browser is outdated. However that's depending on the target audience of the project. If the anyltical data is still saying a high percentage of users are on I.e which is most government websites then yeah I. E support needs to be included. Which you can just do a different style sheet for and target it with conditional comments. It's not a huge deal.
I had no idea this existed. This is super helpful. I was stumped trying to figure out how to use something like how we can configure background images with cover etc while using a picture element for srcset.
This is way more convenient than to use background-image. Haven't heard about this one before but I'll definetely use it in my future projects from now on.
Thank you so much for your courses on Scrimba! :-) They really got me into html and css and i would never have started on my front end developer path if it was not for you Kevin! :-) Being unemployed because of corona i have finally found something to fill my days with, and some day.... Who knows? Maybe i will get a job! :-)
If you want use both image with and height relative to parent, just set parent to position: relative, image to position: absolute and set percentage (width: 100%; height: 100%; left: 0; top: 0). Works best with object-fill: cover :) You can also do pretty mixin in scss for that :) There is also pretty simple fallback for IE, just add class for your parent or image itself and than in JavaScript get each of them, insert element before image, get images url and put it as background, than hide the image. (10 lines of JS code for fallback, no jQuery plugin needed). You can also copy the dimensions.
Nice tutorial kevin, i follow a lot of your videos and have learnt alot, but one thing i gotta say when i saw this video is that i love your choice of image used as i have the exact same one as my desk top background
Kevin. I know you want to grow like other channels (it’s natural being a content creator and all lol) but you really help people with your service/position. Which is something most people can’t say. That’s cool man
I have a PHP function of like 50 lines of code that do just this. haha Seriously. I have looked high and low for something like this for years. You should see the number of Stack Overflow posts addressing this problem, but never once mentioning this solution. Thanks for the content.
Was searching W3, FreeCodeCamp, and stack overflow for my banner/header img issue and was finding nothing to help me. Your video did, thank you so much.
Thank you for the talk. I have used "none" for a image banner at the top of a website. that stays the same height but the width will crop when screen is smaller. disclaimer I am just starting so probably not optimal, but it works great ;)
I came here to confirm what I discovered on Friday night, and within 90 seconds, you've done it. I couldn't get object-fit to work for the life of me because I assumed that it would be fitted based on the dimensions of the parent, but no, it has to be specified on the image itself. Actually, this may be the video that originally introduced me to object-fit in the first place.
week ago...i found this property and was mainly using cover...but sir you introduced me to different other ones...and also the object-position...i loved this video thank you so much.. but...what happened to the intro...it was so cool☹️😱
Oh man, hahaha, I didn't even realize! Oooops! I had to change the order of my layers, and it was late at night and... well that happened, lol. It'll be back next week, though it might be changing again in the not too distant future.
the explanation was awesome man but your codepen screen was a bit too blurry so i couldnt type exactly what u had done there so it would have been nice if u could have put the codepen source link it would have been awesome !!
I guess it would work on my current project. I was just using overflow hidden and absolute positioning. However I wouldn't use the full image once with all the dynamic backend content. As for a folio with heaps of images. that would hinder optimisation.
We find very few situations where we have the option to explicitly set the width and height of something - so, object-fit never seems to come to the rescue! Do you have any favorite use-cases?
Having trouble getting object position to do ANYTHING, no matter what I try, the image remains firmly lined up along it's left edge, center has zero effect. Anyone have any advice?
I've spent the past 30 minutes looking for a property that does to the image tag what "background-attachement: fixed" does to a background image. Does anybody know about that?
Hey mate, I have one Cover image on a page using the default Wordpress theme and I want that Cover image to fill the screen. Could you please suggest how do I do that?
so i put two images side by side, due to their different size i had to give height size 12 rem; but when i got to small screen or mobile view the height is 12 rem; and not looking attractive in compare to large screen please help
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
Kevin, you can actually use it even in ie with the help of some tiny js libraries which mirror functionality of object-fit in ie. They are using some font-family hack to allow this and it works great.
Thanks for mentioning that, I've pinned it :). A lot of the IE issues can be fixed with the help of some JS libraries :)
@@KevinPowell I've always known these little helpers as "shims". Now that I build my own projects and don't build for clients anymore, i focus purely on modern browsers and don't bother with IE.
I'm a freelancer and most of my recent clients don't bother to support Microsoft's IE/Edge in their projects. Microsoft never learns but who knows..
@@eugenhildt910 I usually don't support IE either, but recently had to do a project for a company that really wanted to have exactly same experience in all browsers. And for that project, the js solution for object-fit was a real saver.
I've never had any problems with edge. To me it seems to work just the same as all the other modern browsers. There are media queries that target edge spefically so if something doesn't work 100% you can still do a fall back option. I no longer support I.e versions below edge. I just put in a custom message that pops up saying the browser is outdated. However that's depending on the target audience of the project. If the anyltical data is still saying a high percentage of users are on I.e which is most government websites then yeah I. E support needs to be included. Which you can just do a different style sheet for and target it with conditional comments. It's not a huge deal.
I literally spent a whole day trying to get my image grid to scale properly, then I found this video and fixed it in 30 seconds lol. Thanks, Kevin!
Same here!!
Five years later and five minutes, presto several problems are now solved. Thank you very much for your YT content.
Kevin Powell is the new "CSS GUY" ...of TH-cam..!!! Great effort ...great work..!!!
I spent so long trying to find a tutorial on how to do this but nothing worked. This video was so helpful. Thanks Kevin .
I had no idea this existed. This is super helpful. I was stumped trying to figure out how to use something like how we can configure background images with cover etc while using a picture element for srcset.
Glad I could help. For something so useful, it's really a bit of a hidden gem as many people don't know about it.
Thanks Kevin, keep bring those things that we never used before, so we can start using them. million thanks.
This is way more convenient than to use background-image. Haven't heard about this one before but I'll definetely use it in my future projects from now on.
Thank you so much for your courses on Scrimba! :-)
They really got me into html and css and i would never have started on my
front end developer path if it was not for you Kevin! :-)
Being unemployed because of corona i have finally found something to fill my days with,
and some day.... Who knows? Maybe i will get a job! :-)
If you want use both image with and height relative to parent, just set parent to position: relative, image to position: absolute and set percentage (width: 100%; height: 100%; left: 0; top: 0). Works best with object-fill: cover :) You can also do pretty mixin in scss for that :)
There is also pretty simple fallback for IE, just add class for your parent or image itself and than in JavaScript get each of them, insert element before image, get images url and put it as background, than hide the image. (10 lines of JS code for fallback, no jQuery plugin needed). You can also copy the dimensions.
Thanks for sharing Michael :)
really good stuff dude. your content has those nitty gritty golden nuggets that make me wish i knew about them sooner. keep it up!
Nice tutorial kevin, i follow a lot of your videos and have learnt alot, but one thing i gotta say when i saw this video is that i love your choice of image used as i have the exact same one as my desk top background
Kevin. I know you want to grow like other channels (it’s natural being a content creator and all lol) but you really help people with your service/position. Which is something most people can’t say. That’s cool man
I have a PHP function of like 50 lines of code that do just this. haha Seriously. I have looked high and low for something like this for years. You should see the number of Stack Overflow posts addressing this problem, but never once mentioning this solution. Thanks for the content.
Glad I could help :)
Contain really helped me out sizing beer images from a beer API, thanks Kevin!!
Thanks Kevin, you're truly a CSS god.
Love learning from you. It is always a pleasure 🎉🤩
I got stuck when image-formatting and this is exactly what I was thinking about. Thanks a lot
Was searching W3, FreeCodeCamp, and stack overflow for my banner/header img issue and was finding nothing to help me. Your video did, thank you so much.
Still, KP is #1 in teaching class. Thanx bro.
incredible help for managing images for lists or tables 🥰
When the client provides grid images and has no time to crop them, this will save the day.
Thank you for the talk. I have used "none" for a image banner at the top of a website. that stays the same height but the width will crop when screen is smaller. disclaimer I am just starting so probably not optimal, but it works great ;)
Was working with this the other day. Got a little frustrated. Thank you for the clear explanation. 😁
Hi Kevin, I really like the new fiveminutefriday series! Keep up the good work
Omg you literally save my life I was so tired trying to figure this out with my imgs thanks a lot. You're a Hero!
object-fit: cover is what I was looking for, so cool :))
I came here to confirm what I discovered on Friday night, and within 90 seconds, you've done it.
I couldn't get object-fit to work for the life of me because I assumed that it would be fitted based on the dimensions of the parent, but no, it has to be specified on the image itself.
Actually, this may be the video that originally introduced me to object-fit in the first place.
Awesome tip, thanks Kevin.
Interested to see where you would use this over setting a bg image.. Im sure there would be a use!
Thanks Kevin. This was the solution to an annoying issue I couldn't fix!
Exactly what I wanted to know right now.
This helps me so much. Thanks, Kevin!
You safed my daaamn WEEK. I LOVE yo!
Hello kind sir! You're truly the only person I find very helpful in these subjects. Thank you a lot! :DD
This channel deserved a millions subs!
Thanks ☺️
Your videos are amazing, dude. I'm learning about css features I've never heard of, and ones that I'd wished for ever since I started WebDev.
Cannot believe I just found your channel! Your content is amazing!
This is exactly what I was looking for.
Thank you Kevin your advice has helped me today. Keep up the great tips, videos and courses. Makes learning CSS that much easier!
Man I really appreciate you content! You're super underrated!
Thanks Bryce, glad that you're enjoying it!
I've never heard of this. You blew my mind! THANKS!!
wow super helpful. thank you for explaining all the different properties!
Tears of joy. Thank you man🙏
thanks a lot! very helpful, solved literally the problem I had with the images
Strange, I only started using this element a few weeks ago. Thanks for explaining the different options
It's one that really goes under the radar, but can be really useful.
Awesome! Definitely see the usefulness of this property. Thanks for telling us about it!
It's a handy one for sure :)
thank you for your work, i'm always learning with you!
Thanks for the tip on using the object-fit. I had no idea this existed!
Is object fit a software or its own website?
Wow, I'm so thankful for this video! It's just what I was looking for my images, Thanks 😄
Excellent video! 👏
week ago...i found this property and was mainly using cover...but sir you introduced me to different other ones...and also the object-position...i loved this video thank you so much..
but...what happened to the intro...it was so cool☹️😱
Oh man, hahaha, I didn't even realize! Oooops! I had to change the order of my layers, and it was late at night and... well that happened, lol. It'll be back next week, though it might be changing again in the not too distant future.
@@KevinPowell ohhh...that's the reason...its alright still...the content was great!!!😀
Your great man I learned lot about responsive nedd from you keep doing work like this 🔥
Your videos are a godsend Kev!
This was so helpful been looking for a solution 😱😱😱😱
Awesome video! Any other "how come I didn't know this sooner" properties?
I much appreciate your videos, Kevin :) Thank you for sharing!
You always havre great and clear instructions, thank you so much and all the best!!
how do I center a Video thats lying behind a .png-image..?? As I change my pixel-width of the Page it moves dramatically from its behind position
Great video. You just made my day! Thanks Kevin.
Maybe im late to know this. But thanks for ur experience explain to people for free
very professionally explained....
Brilliant, just saved me pulling my hair out over some bloody slideshow containers! Thanks!
Hahaha same problem here!
You littelraly saved my career!!
I JUST LOVE THE Way you teah
A true scholar mr. powell. nice ending.
Thanks :)
thanks for these amazing videos Kevin. Always very helpful 🙂
the explanation was awesome man but your codepen screen was a bit too blurry so i couldnt type exactly what u had done there so it would have been nice if u could have put the codepen source link it would have been awesome !!
keep it up your five minutes friday
Haven't had time to do them for awhile now, but it's something I plan on bringing back one day!
Thank you! I saved me to write a very complicated JS script to accomplish the same thing!.-
Oh?! Finally can make rounded img card with border tnks
This helped alot. Thank you very much.
Dude, thanks so much for this! Really appreciate the videos....
thanks so much this video really helped me so much! you're a life saver!
DAMN! I didn't know that! That is one good thing 2020 brought to me.
Thanks again kevin
A better example would have been to fill in the div area you have in green with the image which is what most people would want
it gets really relaxing on (00:50)
Thanks for the video it really helped, and Kevin you said that you use object-fit sometimes not all the time, what do you use most of the time then?
You know what this stuff is dope
I guess it would work on my current project. I was just using overflow hidden and absolute positioning. However I wouldn't use the full image once with all the dynamic backend content. As for a folio with heaps of images. that would hinder optimisation.
Succinct, informative, and valuable information - appreciated.
Dope tip! Thanks Kevin
In the CSS section of this video, the code is written starting from line 14. Do You Need Codes Up to Row 14?
Is there an alternative way to object fit? As I am trying to use object fit with transitions and it just doesn't work
Helped loads. Thank you.
Another great video. Thanks!
Thank you, Thank you, Thank you, Thank you, Thank you, Thank you
what you used in writing codes? i only got notepad :C
We find very few situations where we have the option to explicitly set the width and height of something - so, object-fit never seems to come to the rescue! Do you have any favorite use-cases?
Thanks! This was very helpful!
Having trouble getting object position to do ANYTHING, no matter what I try, the image remains firmly lined up along it's left edge, center has zero effect. Anyone have any advice?
Your Videos Are Very Good
the object-fit doesn't work for me, like it's grayed out as if it doesn't exist. Any help?
I've spent the past 30 minutes looking for a property that does to the image tag what "background-attachement: fixed" does to a background image. Does anybody know about that?
Hey mate, I have one Cover image on a page using the default Wordpress theme and I want that Cover image to fill the screen. Could you please suggest how do I do that?
You're a hero!
so i put two images side by side, due to their different size i had to give height size 12 rem; but when i got to small screen or mobile view the height is 12 rem; and not looking attractive in compare to large screen
please help
thank you for this tutorial,it was really usefull
Hi,my name is frank, I would like to ask, how can be made divs with different height to become all with the same hight?
How do you get the image to fill the container (green box) ?
thank you for the intel.