`max-width` sets the largest horizontal size an element may have. Think of it as a ceiling, not a demanded size: the element can be narrower, but it should not grow past the limit. Values can use CSS measurements such as `px`, `em`, `rem`, `vw`, `vh`, or percentages. section 9.3
A common responsive-design use is keeping an image flexible without letting it become bigger than its original width. The rule `max-width: 100%` lets the image respond as its parent changes size; paired with `height: auto`, it keeps the image’s original aspect ratio instead of stretching it into a funhouse-mirror version of itself. section 14.7 section 14.12
img {
max-width: 100%;
height: auto;
}
Use this small rule to make an image fluid: its width can adapt to the available parent width, while its height is calculated proportionally. section 14.7
Centering a content container
`max-width` can also keep page content from spreading across the entire browser window. Give an inner container a maximum width, then use `margin: 0 auto` to divide the leftover horizontal space equally on both sides. An outer element can still span the full window for a background color or image. section 10.5
REMEMBER
- Use `max-width: 100%` with `height: auto` for a fluid image that preserves its proportions. section 14.7
- Use a pixel maximum such as `max-width: 800px` when content needs a readable, centered column rather than the whole viewport. section 10.5
- Do not confuse `max-width` with `min-width`: one sets the ceiling, while the other sets the floor. section 9.3
