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

What does a max-width of 100% mean in this case?

.

3 Answers

Steven Parker
Steven Parker
231,236 Points

You use settings like "max-width" because you don't know what the container width will be, but you want to be sure your element will fit inside it. For example, if you put this setting on an image, and the container size is too small for it, the browser will shrink it down to make it fit.

.

Steven Parker
Steven Parker
231,236 Points

It will never be any larger than the parent, but it could still be smaller.

If you want it always that size, use "width" instead of "max-width".

.

Steven Parker
Steven Parker
231,236 Points

That only happened before the "max-width" setting was added. After that, the images shrunk with the window.

.

Steven Parker
Steven Parker
231,236 Points

Images have an intrinsic size in pixels. By default, they will be displayed at their natural size.