max-width
The max-width property sets an upper bound on an element's width, overriding width when smaller.
Syntax
max-width: <length|%|none|max-content>;
Examples
.prose { max-width: 65ch; }
img { max-width: 100%; height: auto; }
Output
Caps reading text at a comfortable line length and makes images shrink to fit their container.
Notes
max-width:100% with height:auto is the classic responsive image rule. It always wins over width. The ch unit is ideal for readable measure (around 45 to 75 characters).
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |