Responsive image sizing

Hi, I’m having trouble getting the image sizing to pass the test. All sources have pointed to using max-width but I’m not sure if it’s in the wrong place or what. Thanks in advance!

You need to create a rule so that the image is not “stretched” larger than the actual image size. If you only use 100%, then on a large screen, an image might be stretched and distorted.

Ok that makes sense but I’m not sure how to go about doing that. Do you have a specific suggestion?

Use the max-width property.

I am? Is it in the wrong place? I’m using the max-width property on all of the image stuff in the CSS. I’m not sure where else to put it

What are you setting the max-width to?

100% and then the height to auto but I can’t think of what else to set it to

If the max width is 100%, then there is nothing to prevent it from being “stretched” larger than the original image. The 100% refers to the size of the parent container. If I have a 100px image in a 500px div, then setting the width to 100% will distort the image.

I figured it out, thank you.

Good job! Happy coding.