HTML & CSS for Absolute Beginners: Responsive images

Key Takeaways

[Music] now if you've ever thrown an image into a website and then you've resized things maybe you've even done work to make sure everything else is working but uh you might have realized when the browser window gets smaller the text and other content will adapt automatically to the browser without doing anything but images won't images shoot out the side and it's kind of annoying because they cause horizontal overflow on our pages and that's just the way images work because by default images will be the size of the image you're putting there you have a small image it will be small a really big image it's going to be really really big so what we want to do to be able to fix this is we're going to come over to our Styles here I'm going to come up a little bit uh just so I'm sort of where my general element selectors are and I'm going to do it right here and this is going to be one of the most common lines that you write in your CSS uh basically every file as part of the general reset at the beginning people will include this along with the Box sizing a border box and on here what we're going to do is we're going to say Max inline size of 100% and a Max inline size this means along the inline axis we can't get bigger than 100% 100% of what it's 100% of the parent so whatever the image is inside of and by doing that if I refresh this you can see my image is actually now shrinking down as this gets smaller and is growing as it gets bigger and so it keeps or prevents the image from overflowing if I come down and I go look at my other page here the same thing will be happening with my image down at the bottom because we're using a general image selector so all my images are getting this applied to them so that solves that problem what you do not want to do is set an inline size or a width you don't want to do that because what that's going to cause is as things get bigger sometimes the image will actually start getting larger than what its original size was and when that happens the quality of the image is going to start going down because we're getting bigger than the original size images are made up of pixels so basically those pixels start getting filled in by the computer and it it's not very good at it so we want to use a Max width or as I said I prefer using the inline size as the logical property there and that's going to prevent any responsive issues and problems but there is one more piece to this puzzle that you'll normally see which is also coming on here and actually changing the display type to block not black but block and that's because images are inline elements and just to highlight that let's come and we'll we're on our second page here so and I'm actually going to put it around here where I have the getting started that's right there so to do that we're going to come right here and I'm going to put in my IMG SRC is equal to Al is equal to and I'm going to close that image and then here I'm going to go to my images folder and I want to use my simple steps image because it's not too big and there we go we get the image coming in and to show what this is doing I'm just going to come back and we're going to get rid of the display block that I put on there because if you remember when we have display block it always forces a new line so unlike many sports new line line Image new line getting started which we don't want uh just to highlight this and so you can see that I have an image that's inside of my text and it works you can put images in there in the old days of the web you might have wanted to do this these days it wouldn't be very common but one thing you'll notice I'm going to zoom in a lot here to highlight what's happening is the text is actually sitting on what we call the Baseline and the Baseline is this like the under if you were to take like an underline like we have here for uh on our link and draw along there it's where all the letters are sitting but some letters go below the Baseline our P here is going below the baseline or our G here is going below the Baseline and there's actually this space underneath the image that's reserved to make sure that it sits on the Baseline properly and you can see that like the G goes underneath where my image is sitting if we wanted to have images in our text this is probably a better Behavior but as I said it's very rare that you'd actually want to do something like that so it's much more common to well first of all let's come here and take that out cuz it's a silly thing to have uh so I'm going to remove that and then let's we can shrink this back down uh and if we come and take a look actually down here we have this image at the bottom and this is going to highlight why we add the display block with the way we use images in modern design is on this page we have this section here so section here going all the way down to my section there with this image all the way at the bottom and let's come on this section and I'm going to add the class that we have of tebg which just gives us a background color that's teal on there uh and you'll notice the space on the bottom here actually looks a little bit bigger than the space on the left and the right it's not a lot but it is a little bit and the reason for that is because on our tbg we go and find it we have some padding on there so we have 20 pixels of padding on the left and the right looks bigger than that CU I'm zoomed in right now but we have that 20 pixels and here we have the 20 pixels plus the empty space underneath the image and to really highlight this let's make our padding zero and then refresh so the image is touching here it's touching here but it's not touching on the bottom and this is infuriating that you get these little spaces that come up like that and you could even like people will try like image margin Zer to try and reduce the space but it's not a margin that's there it's literally the empty space underneath the image because it thinks you might want to use it within some text so it's really a hold over from the old days of the web and because of that and to prevent that from happening the common way to do that is your max inline size of 100% And then to also come in here with the display a block and because it's not an inline element that needs to live on a baseline it's now a block element when I refresh here you can see it actually lines up perfectly with the Bottom now and it doesn't add unnecessary space so whenever you're doing your images we make them responsive with this line and we just make them more useful for everyday use and how images are used in modern web development with the display block there and again with your box sizing border box this is something you probably want to include on every single CSS stylesheet that you create