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?
Your project link(s)
solution: https://codepen.io/albertmcw/pen/wvJQOQY
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Challenge: Build a Tribute Page
Link to the challenge:
max-width doesn’t cause an item to automatically fill all available space. It can still be smaller than max-width. You can use min-width or width to make an item larger.
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?
I don’t understand the question.
If you want pay a maximum of 1$ for icecream, you can still buy icecream for 0.90$.
A browser will ignore “max-width” as long as the image is smaller. So as long as the image is smaller, it will take up only as much space as it needs and nothing more.
But why the price is 0.9 (i.e. original width) when I set the max-price to as much as you can afford (i.e. container width), which may be more than 0.9 dollar?
For example, the original size of the image is 300px, and max-width is set to 100%. If the container now has a width of 500px, why is the image size only 300px instead of 500px?
Or do you mean the container is the image itself instead of the parent element?
Hope I am making the question clearer.
100% is 100% of the width of the parent element. IIRC an img is display: inline by default. Inline elements don’t automatically fill the width of the parent element the way display: block does.
Do you mean the image does not expand in size because it is an inline element (actually inline block)? If so, there is no point setting max-width.
I tried (https://codepen.io/albertmcw/pen/GRWPyBz) and found even it is inline block, the image will fill the container if width : 100% but it won’t when max-width: 100%. And I tried display:block (https://codepen.io/albertmcw/pen/poeqpBE), the results are the same. I have no clue why.
You already got the answer from @Jagaya, but just to clarify - if you set a max-width, it means that the browser will
“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:
max-money: 500
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
money: 500
Now your 300 won’t be enough, so you’ll have to buff up your budget somehow.
I think I got the reason.
Setting max-width: 100% does NOT prevent the image from scaling up beyond its original size, it just instructs the browser to shrink the image when the container width is smaller than the image.
It is the width default value (auto) who tells the browser to show the image in its original size as long as possible (i.e. when the container width is not smaller than the image).
Combining these two, the image will shrink but not scaled up responsively.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.