Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
220,378 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

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!