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.