Help with css please

below is the link to FCC tribute page

My question is why the image is not taking the full width even though the max-width of it is set to 100%.

Max-width gives the maximum width, but it doesn’t tell the image to be that. If you change it to width: 100%, then it will stretch to fill the available space (minus padding/margins of its container elements).

max-width is like a fence that doesn’t let the image go outside it.

1 Like

yea, but i can not see any padding applied around the image to make it behave that way, and the margin of the image is set to auto which means it will take the full width space…

Images do not default to 100%, even with max-width. max width sets the maximum width, it doesn’t tell the image to be that width.

Images display at the size of the image. If you download the image, you will see that the file itself contains that information (I’m attaching a picture of a different file, that has a width of 480 px).

If you download the image in the Tribute Page, you will see that it is 1024 px wide. That is what it will display as on a website, unless:

  1. you put max-width of (say) 1000px. Then it will display as 1000px.
  2. you make it width: 100%. Then it will expand to fill its container. If the container is 2000px, then it will be 2000px. If the container is 200px, it will be 200px.

Check it out. I am looking into the properties of a random image on my computer. See how it tells you the width and height?:

1 Like

Thank you very much for spending your time at solving my question, it is clear for me now thanks.