Sizes that flow
Instead of jumping at breakpoints, sizes can flow smoothly with the screen: a heading that's 28px on phones and 56px on laptops, images that never overflow, photos cropped neatly into tidy shapes.
clamp, max-width, aspect-ratio, object-fit
- clamp(min, preferred, max) — a value that scales with the screen but stays within limits.
- img { max-width: 100%; height: auto; } — images never overflow their container. Put it in every stylesheet.
- aspect-ratio: 16 / 9 — keep a shape as the width changes.
- object-fit: cover — fill the box and crop the overflow, instead of squashing the image.