Max-width confusion

Hi I was looking at website and looking at how they have coded their images. I went to the bottom of the page with the 2 images one with an S and one with a woman on a laptop.

So I can see that the container for both of these images has a width of 47% meaning that they don’t have to give the img a set width just needs to fill the container. But then on the actual image it is written:

img {
    max-width: 100%;
    display: block;

Now when I take out the max-width:100% the structure of the pictures collapse and going to the right.

My quesiton is shouldn’t the images stay inside the container of 47% without max-width and why use max-width instead of width?

Your images are bigger than the div containing them.
width:100% and max-width:100% both make them responsive - adjust to the size of the div they are in (which are also responsive) - and be 100% of the container size. It uses max-width to stop a small image being stretched up to fill a big div, If all your images were bigger than the divs, and guarenteed to be that way, width would work okay.

Removing the width constraint totally from the images makes them overflow the container as they are bigger than it. Adding overflow:hidden keeps them back inside the container and matches its size.
The rule of max-width:100% applies to all images, so removing it wrecks the size of all images and hence a lot of the page.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.