How to add responsive images to website using 100% width in HTML & CSS

Hey there, this video is about responsive images. This particular one is working with the 100% width. We've kind of done it in the course and I thought, "Oh, we don't need to cover again," but I feel like we should. Just to really, A, get it in a good place, so you can find it later on in this course, and also just to confirm what we know, because we're kind of attacking it from a slightly different method here. 

So now I've got these images, you can see, they change, they're different sizes on different browsers, because of what I'm doing with my columns. You can kind of really see now how 100% kind of works. As long as the column changes, the image will just adjust to fit it. So we need to put in a nice big image, scale it to fit the column, and it's a real quick and easy way to make responsive images. Let's jump into VS code and work it out. 

To get started let's delete the Box1 and its H1 tag, so the whole thing, because I don't want that Heading anymore, I'm going to put in an image. Now we don't have the images over in our Exercise Files. So let's go to 'Exercise Files', find your 'Project3' file. Let's use the images large, because we're going to put them in large and just scale them down. So we're going to grab all of these, copy them, and let's go to our 'Desktop'. Let's go to 'Project3', and put in our 'Images' folder, and inside of that images folder we're going to paste all of our images. So let's go and load at least the first one, so IMG, and the SRCs, the source, this one's going to be an images folder. 

I'm going to use images1, image1.png,. You should always add your Alt text, I'm not because I'm just not, you should. Let's save it, let's have a little look at it in the browser. So turn you off, turn you back on again. So the giant image, it's way too big. It's even twice the size as it needs to be. So to cut it down we are going to use a bit of CSS. So the bottom, not the bottom-- so we've got our Global view, and before Desktop view starts I'm going to put a bit of that in there so that I can add it here. So what I want to do is I want to make all images half the size. I know that I want to make the ones inside of the col half the size, not the com, the col. 

So images, only if they're inside this Div called 'col', I would like you to be a width. A width of 100%. Semicolon, now that will mostly work, you need to put it in a height as well. So we need a height, and I don't want the height, I just want the height to be automatic. 100% is going to try and stretch it, whereas I'm just going to leave it as Auto, and that's not working, why aren't you working? Reset. It's kind of working, it's a nice big image. It was kind of made to life as one pixel density, but because I've scaled it down, it's now pixel density of 2, or it's double the resolution, or high DPI, whatever you want to call it. 

The trouble is, you can kind of see that pink poking at the bottom there, and when I resize it, can you see, it's not quite doing what I want, it's kind of like shrinking in there, and the box is not getting smaller, because I set a physical height to this box. So let's get rid of the pink background and the height off that column. We did it earlier, background color, minimum height, goodbye. Save it, let's have a look now. It's kind of working, the boxes have collapsed, and there's no color in them. Awesome. 

So that is the easy way to implement responsive images. It is bigger than it needs to be, and it's squished down, so on different devices, it's going to load the right physical size, but there is more scale for it to become a higher DPI image or PPI image. What do they call it? Dots per pixel, the pixel ratio can be higher. All those words are really meaning the same thing. We're just trying to get the right image quality, for the different device screen. Now you can skip ahead because I'm just going to add all the images in here, up to you. You can hang about if you want, it's going to be pretty boring. 

I get that shortcut wrong all the time, it's 'Command Alt', sorry, 'Command Option' on a Mac, 'Ctrl Alt' on a PC, and we're going to delete all of that including the H1, and I'm going to grab this image. Cheat. Do the same thing, my shortcut, paste it in. I'm just going to switch out the images, image 1, 2, oh 1, perfect. No; come on, Dan. That's 1, that is going to be 2, this next one's going to be 3, that one's going to be 4. It's painful to watch, it's painful doing it. All right, let's do image. ‘images/’, I'll put in him, all of them. Because they're the widest we can do it nice and easy. Let's get rid of all of the numbers and start typing them in one at a time. So what are we up to? 1, 2, 3, 4, and 5, 6, 7, 8, 9. Forgot about this guy down here, he's just not only, oh yeah. So I'm just going to grab all of that. Copy. 

We can use our selection or our tags, remember, it's under View. It's this one here, Expand Selection, it's a bunch of shortcuts. 'Command-Shift-Ctrl' on my Mac, I'm going to paste in that fella. This one's going to be 10. All my images in. Would be heaps easier to do it before I started editing these, but hey, it's not the flow of the course. Just check and make sure they're all in there. The cool thing about them is, look at them respond. I have to switch it out to a mobile device, inspect, and I got to turn the device toggle back on. And that's what it looks like on a mobile phone. It's not many of them, but at least it's 100%, and it go to responsive, and go, hey, cool, huh. Here we are. 

So that's 100% scaling, we'll look, in the next one we'll look at the other method, the other main method is using the source set. I'll see you in a sec.