Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Howard Chen
Howard Chen
2,999 Points
Posted by Howard Chen
Howard Chen
2,999 Points

Shouldn't the max-width property, used in the image example, technically be min-width?

The property ensures that, when set to 100%, no matter how you resize the browser, the image is always at 100%. Technically, doesn't this mean that its minimum width is at 100%? The name Max-width implies that the image width can still be 0 as long as the maximum is 100%.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I think you may have answered your own question without realizing it. When you said, "no matter how you resize the browser, the image is always at 100%" you're talking about 100% of the image's container. And the container is already set to change as you resize the browser. So when the window is made smaller, the container becomes smaller, and now the image will also become smaller. As demonstrated in the video, before the limit was applied, the image size would overflow the window (and be cut off) when the window was made smaller.

So the limit being applied is to the maximum width the image can have for any given container (window) size. That's why it's max-width and not min-width. If the container were stretched wider than the image natural size, then the image would no longer cover 100% of the container.

Howard Chen
Howard Chen
2,999 Points
Howard Chen
Howard Chen
2,999 Points

I think I see the difference now. Before the image was going over 100% of its width when it overflowed. So now we apply the max-width to ensure the image is constrained at 100% at most within the container. Thanks!