Why do we use maximum width 100% to see a full image and not minimum width?

In this exercise, why does changing the .image container img rule’s maximum width to 100%, ensure that the entire image is always seen.

How does changing the maximum scaling width change how the picture scales? If anything, I would’ve thought minimum width at 100% would force the entire image to be seen. I don’t entirely understand how this interaction works.

2 Likes

When scaling the width of an img to 100%, it is the parent container width that it is scaled to. We do not set the height in this case, only the width. The picture will expand to fit the parent to any size. It may overflow at the bottom after a certain width.

BTW, please post a link to the exercise so we can read the lesson text and give this question some context.

17 Likes

Hi,

This is the exercise: https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-responsive-design-module/lessons/sizing-elements/exercises/scaling-img-video

I’ve got the same exact doubt, but somehow your answer does not do it for me. As the first question said, wouldn’t it be more logical to use min-width 100% instead of max-width? Like saying: you have to stay 100% and can’t go less than 100%.

I see that it works this way, but can’t understand why. I’m saying “maximum height is 100%” but maximum 100% means it could also be 90, 80, 70%…

15 Likes

Thanks for the link.

On re-examining my response it actually refers to the width attribute on an img tag. When set to 100% the image always expands to fit its parent container, but scales up and down…

Setting the container width to 100% allows for the similar behavior on a background image, except the image does not scale up and down like it would for the above. max-width allows the image to stretch to fit a large window, and when the window is narrowed to only a few hundred pixels the image still covers the full width width without a horizontal scrollbar coming into play. Remove max- from the property and shrink the width, you will see a scrollbar eventually come in.

26 Likes

The max-width of 100% scales the image to horizontally fit its parent container, preventing the image being cut-off (horizontally) by it.

Previously in the lesson, the images were overflowing the parent container. We solved that with overflow: hidden but that doesn’t stop an image from being too large for its parent container; it just cuts it off at the container.

13 Likes

I feel that responses here somehow created more confusion.
Here is how it works:
In this case u have 3 options.

  1. Go with width: 100% - that will strecth or shrink the image to fill the container, no matter what width container has.

  2. Go with max-width: 100% (like in this case) - this will make the image fill the container UP TO the image maximum size, if the container gets bigger than the image size, the image will not stretch any further. for example, lets say the image size is 640x400. If the container width is 320px the image will adjust to that… but if the container width is larger then 640px, the picture will not stretch any further… it will go UP TO 100% of the image size… that means 640px:

  3. Go with min-width: If we take the example above and we have a picture that is 640x400, min-width: 100% will make the images AT LEAST 640px wide, so if your container is less than that, the image won’t scale down, it will overflow the container.

175 Likes

The only instance scroll bar will appear, is if you use overflow: scroll;

1 Like

This is what I was looking for when I clicked on this discussion. Makes a lot of sense, thanks!

8 Likes

please notice the sired77 explanation. that’s what we all were looking for. your answers can often be too complicated and off topic.

7 Likes

Im afraid you are wrong. Based on my screenshot the image in your example would just overflow instead.

then why does it say here, in my screenshot, that an image will overflow when the parent dimensions are exceeded?

There’s nothing wrong with my answer, I was only referring to the width values, the reason the image would overflow in the exercice you mention above, is the height value.

  • Note that in this case the container has a fixed height of 200px and the image height is set to auto, that means the image height will scale when the width scales to maintain the image aspect ratio and can exceed the 200px height limit of the container. That will result in an overflowed image.
5 Likes

thanks for you kind respond. hope somebody who actually works here will find the time to confirm your words. thank you.

is that so? hope someone in charge will eventually respond

Glad I could help. As a friendly advice, don’t expect a response from a moderator anytime soon… instead get your hands dirty and test it yourself :grin: is not that hard to do it, and it will help you improve a lot more than by simply waiting for someone to confirm if I’m right or wrong.

17 Likes

yes and also sometimes condescending because @mtf sometimes misinterprets a question and gives an answer that confuses the user

3 Likes

A good answer,is all what i need.
(Thank You)

Could you explain this again, but in terms of the logic of what the word min and max represent?

Like a previous @arcsolver39894 said, it makes sense English-wise to use min-width. Why? because if I want the image to always display 100% of its content, then the very smallest % it is allowed would be 100% (min-width).

Using max-width just seems logically wrong to do because again…
If I want to display 100% of its content ALL the time, max would be stupid, because the smallest % it’s allowed is 0%.

Kudos and thank you!

1 Like

Why did we have to wrap the <img> elements in containers?