Image Problem with the Responsive Web Design Projects - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

When I submit my code in the Fork Me link the test says that my image is not sizing responsively and exceeds the image original size. However I added the css: max-width: 100% to the image so the width will not go any higher than the original image file. The image also grows and shrinks with the window, so I am not sure what is the problem.

Your code so far

Here is my codepen:

Your browser information:

I use chrome the latest version.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.80 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

3

Putting 100% as max-width also works to stop the image from exceeding the original size but that is also good to know. Thanks!

Also I figured out the problem was that I needed to put the image as display: block. I honestly don’t understand why that need to be a requirement to count as responsive. But it is a nice reminder that an image is by default is inline which I forget constantly.

Thanks again for responding! Can’t wait to try out the next challenge!

1 Like
4

Image is inline-block by default, inline-block is kinda mix between inline and block, it is an inline element which you can give a width and height.

1 Like
5

Sorry for the mistake in the first reply, yeah you are right, setting max-width to 100%, prevents the image from surpassing its container and at the same time will not surpass its original size because the width is auto by default

1 Like
6

Oh inline-block, that’s right! That is why I could still edit the width and stuff. Thanks for the clarification.

1 Like