4. Controlling the width of images - Responsive CSS Tutorial

okay so we have our containers that are set at fifty percent of our total screen size but we have this really awkward problem that's going on with our image our image just does not look very good when it's sticking out the side like that so how can we fix it can you think of a way that we could solve that problem is there something that we've looked at so far that would solve it because we have all the tools we need to be able to fix that so see if you can think about it coming to code try playing around with something and see if you can solve the width of the image so hopefully what you thought of is you can actually set a width on your image so if we come and take a look here images are a little bit weird and what you probably don't remember is when we first were looking at block and inline I mentioned that images aren't actually an inline element they can flow with text if I put an image in a paragraph the text on that line will will actually flow with it put that image in the paragraph itself they're a bit of a special case there's things that are a little bit different with them but they are technically an inline element so they're not defaulting to 100% with their defaulting to the size of themselves what that size of the image is so what we can actually do is we can come in and I like grouping it sort of here with all the other things that I'm doing in the general area instead of the more specific areas room styling things and I can select my images so IMG I'm not putting a dot I'm not putting anything else because I'm selecting my image itself so I'm gonna select my image I'm gonna give this a width now this width for now I'm gonna give this a width of 250 pixels it's a set unit we're not gonna leave it there but just to show you what that does so look at that my my image size has shrunk down the one thing you have to be really careful with if you set a width on an image is not to also set a height to it because if I set a height on this image which you can do it will actually end up stretching the image and distorting it and making it look really really ugly whereas if you only put one or the other so I could say a height or I could say a width either one is going to work and if I if I only have one of them it's automatically going to handle the the second property so it's going to keep it in proportion instead of stretching it so you know now that we can set a width on an image how do you think we can get that image to match the size of the container so hopefully you said use a percentage and what I want you to do is set it and see if you picked the right percentage try and set an actual size on this using percentage and see if it's fitting the way you think it would all right so there's two answers people usually think of one of them is to give it a width of a hundred percent and the other one is a width of 50 percent and the reason a lot of people think of 50 percent is because on my container we gave that a width of 50 percent here so if this has a width of 50% it makes sense to give the image a width of 50% but if you did that you might have noticed it didn't work it's pretty small but if you shrink this you'll see it's it is growing and shrinking with my page so the percentage is working it's just not what we thought it was so we just have to remember what I said before about how percentages work a percentage is always based on the width of the parent so if we come and we look in our index here when we set the width of the container this was 50% of the width of section 1 which automatically was the full size of my screen so it ends up being 50% of my screen width this image on the other hand its parent is the container itself so this image is the whatever percentage I set for a width on my image will be a percentage of this container width so if we come into my styles now my image I actually wanted to be 100% so if we go and look again we can see that it has been fixed and now whatever I do here my image is going to grow and shrink with the size of that container and match everything that's around it which just makes the layout work much better so if I come down and get rid of that magenta border and we go and look at it again we can see that it looks nice and fancy and it fits well with the overall look of the document the only thing is a 50% width is a little bit small so if I come down to this everything is getting a little bit smushed I'd rather that it's sticking closer to the sides and I'm not getting like this massive it's almost acting like padding you know look how small that images I can barely see it so it's really common to not have a width of 80 50 percent but to do like a 90 percent or something like that because on small screens that's gonna look a lot better that's sort of that that cell phone type look that you're probably used to having and seeing but as this gets bigger we do at one point now we're getting two big lines of text going from one side all the way to the other is really really awkward so we want to try and avoid having text that stretches from one side of the other like what's happening right now and the next video we're going to look at how we can do that