Key point “relative to the width of its parent element, without exceeding its original size”
only accomplishes one of these…that it will be relative to the width of its parent. but if the parent is larger than the size of the image, then the image will scale up to be larger than its original size so that its 100% the width of its parent.
Btw, you dont want to put a hard-coded size into your max-width for the image. For it to be responsive, it needs max-width: 100%, which means the max-width that image will ever be is 100% of the width of its container.
I just checked and yup, if you just change the image to max-width: 100%; then it becomes responsive and your tests pass. Right now you have it on img-div, not on the image itself (which is img) You want the image to be responsive, so you need to put the responsive styles directly on it, not on the div containing it.
Side note: max:-width: 360px doesnt do anything because the image is 300px…its not going to ever be required to be limited to a size of 360px because its actual size is smaller. But, with responsive design, its not a good idea to hard code the image size like that because then it wont be variable to the size of its container. Its better to use percentages.
Also, you don’t need the width: 100%; height:auto; that is currently on img-div because the natural behavior of a div is to take up the entire width of a page, and expand 100% to the height of the contents within it.
Hope that helps and also helps explain what is going on there!