The CSS auto value lets the browser choose a property's size or spacing instead of forcing a fixed measurement. Think of it as saying, “You decide—but use the layout rules and available content.” section 9.2 section 13.3
Common jobs for auto include:
- Set height automatically so an element grows naturally to contain its content. section 9.2
- Set an image's height to auto so its original aspect ratio remains intact when its width changes. section 14.7
- Use horizontal margins set to auto to center an element when its width is defined. section 9.6
- Let grid columns or rows take sizes determined by the other track values and available layout space. section 13.3
Keep an image from getting squashed
img { max-width: 100%; height: auto; } As the parent container becomes narrower, the image scales down while the browser calculates a matching height. No pancake-shaped images required. section 14.7
img {
max-width: 100%;
height: auto;
}
Inspect the compact fluid-image rule that combines max-width: 100% with height: auto. section 14.7
