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.
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!
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