Tell us what’s happening:
Literally, setting max-width of an image to 100% should mean the width of the image cannot be greater than the width of its container. But why does it become not greater than the original size of the image?
Thank you. I agree with all your three sentences. But they are not answering my question. My question is WHY setting max-width to 100% (of its container width) would have the effect of setting max-width to the original width of the image?
“shrink the image if it’s wider than its container”: But the point is (with max-width:100%) the browser shrinks the image even if it is NOT wider than its container; it shrinks when the image is wider than the original image instead (when original image width is smaller than the container width).
“leave it alone if it’s not wider than its container”: why doesn’t the browser expand the image to its max-width?
I don’t understand what you mean with “image” and “original image” (are we talking about two different images here?), but in any case - the browser doesn’t shrink it. If you have an image of 300px and a container of 500px, and you tell the browser that the image’s width may not be bigger than 100% (that’s what MAX width means), it’ll look at the image and say “alright, image isn’t bigger than container so I can leave it as it is”.
That’s what the width property is for. If you want an image to completely fill its container, you use width.
I’ll try again with another example. You have 300 bucks and your girlfriend tells you that you should buy her a new phone, specifying the following:
Are you going to watch out for a phone that costs you the 300 you have, or for one that costs you 500?
What if she specifies
Now your 300 won’t be enough, so you’ll have to buff up your budget somehow.