How would you use the CSS aspect-ratio property to reserve space for a media embed, and in which cases is the declared ratio ignored?

## What the property does `aspect-ratio` gives a box a **preferred aspect ratio**: a relationship between its inline and block sizes that the layout algorithm uses to fill in whichever one is `auto`. ```css .video-frame { width: 100%; aspect-ratio: 16 / 9; /* height computed from width */ } ``` The value is `<number>` or `<ratio>` (`1`, `16 / 9`, `4/3`), optionally prefixed with `auto` as in `aspect-ratio: auto 16 / 9`, which means "use the element's natural ratio if it has one, otherwise fall back to 16/9". That `auto` form matters only for replaced elements, which are the only boxes with a natural ratio of their own. It has been widely supported since 2021 (Chrome 88, Firefox 89, Safari 15), which is why the older `padding-top: 56.25%` ratio-box hack — exploiting the fact that percentage padding resolves against the *inline* size in both axes — is now legacy rather than current practice. ## Reserving space The reason this is an interview question is layout stability. If a slot for a video, a hero image or a map has no height until the resource loads, everything below it moves when it arrives. A ratio breaks that dependency: the inline size is definite from the containing block, so the block size is computable immediately, with nothing loaded. ```css .embed { width: 100%; aspect-ratio: 16 / 9; } .embed > iframe { width: 100%; height: 100%; border: 0; } ``` An `iframe` has no intrinsic ratio, so the wrapper supplies one and the frame fills it. For an `img`, the intrinsic ratio usually already does the job — but a declared `aspect-ratio` is useful when you want a *uniform* slot regardless of the source, in which case pair it with `object-fit: cover` so an off-ratio source is cropped rather than squashed: ```css .card-media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } ``` ## When the ratio is ignored **Both axes definite.** The ratio only ever computes an `auto` dimension. Declare `width: 400px; height: 300px; aspect-ratio: 16 / 9` and you get a 400x300 box; the ratio contributes nothing. This is the single most common surprise, usually caused by a `height` inherited from a shared class or a UA stylesheet rather than one the author remembers writing. **Neither axis definite in a context that will not give one.** If the box's inline size is itself content-based, the ratio has no definite input to work from and the result is whatever the content produces. **Content that does not fit.** For a box with a preferred aspect ratio, the automatic minimum size in the ratio-dependent axis is *content-based*, not zero. So a ratio'd box containing more text than the ratio allows grows taller instead of overflowing: ```css .tile { aspect-ratio: 1 / 1; } /* square until the text is too long */ .tile { aspect-ratio: 1 / 1; min-height: 0; } /* stays square, content overflows */ ``` This behaviour is usually what you want — silently clipped text is worse than a stretched tile — but it does mean `aspect-ratio` is a preference, not a guarantee. **Explicit min/max constraints.** The min/max clamps run after the ratio-derived size, so `aspect-ratio: 16 / 9; max-height: 300px` yields a box capped at 300px whose actual ratio is no longer 16:9. ## Interactions worth naming - As a **flex item**, a ratio'd box in a row container gets its inline size from flex sizing, then derives its block size from the ratio; `align-items: stretch` (the default) can override the block size, so set `align-self: start` or an explicit alignment when you need the ratio honoured. - As a **grid item**, stretching in both axes is the default and will defeat the ratio for the same reason; `place-self: start` restores it. - For **replaced elements**, `aspect-ratio` overrides the intrinsic ratio unless you use the `auto` prefix, which prefers the natural one. ## What a strong answer includes The pattern, the reason it stabilises layout (block size computable before load), the both-definite ignore rule, the content-based minimum that lets a box outgrow its ratio, and the pairing with `object-fit` for images. Mentioning that alignment defaults in flex and grid can silently defeat the ratio is what marks real production experience.