The aspect-ratio property sets a preferred width-to-height ratio, so an element reserves space before its content loads. It replaces the old padding-top percentage trick and, used with width: 100% on media, removes the layout shift that appears when an image finally arrives.
Before you start
You should be comfortable with the CSS box model and sizing. This article covers aspect-ratio and its interaction with replaced elements; it assumes basic media styling.
Step-by-step walkthrough
Step 1: Set the ratio on the box
aspect-ratio: 16 / 9 makes the element’s height follow from its width. If one dimension is constrained, the other is computed, so a full-width container keeps a stable height as the viewport changes. The ratio is a preference that yields when both dimensions are fixed.
Step 2: Combine with object-fit for media
An <img> with aspect-ratio, width: 100% and object-fit: cover fills the reserved box and crops overflow instead of stretching. Without object-fit, the intrinsic ratio fights the declared one and the image can distort.
Step 3: Reserve space before load
Because the ratio is known from CSS, the browser lays out the box at the correct height immediately, so the surrounding content does not jump when the image loads. This is a measurable improvement in Cumulative Layout Shift, especially for image-heavy pages.
Worked scenario
The thumbnail keeps a 16:9 box and crops the image to fit.
.thumb {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
}Walk through the example
Before the image loads, the element already occupies a 16:9 area, so the page does not reflow when it appears. Once loaded, object-fit: cover scales the image to fill the box and crops the excess, preserving the ratio without distortion. Resizing the viewport recomputes the height from the width and the fixed ratio.
Common mistake
Using the padding-top hack and forgetting the absolutely positioned child it required, or setting height and width together so the ratio is ignored. Another is applying aspect-ratio to inline text where the box has no intrinsic ratio to replace.
Verify the behavior
Load the page with images throttled and confirm there is no vertical jump when they appear. Check the computed height equals the width times the inverse ratio at several viewport widths. Compare the layout with and without object-fit to see the distortion it prevents.
Interview exercise
How does aspect-ratio reduce Cumulative Layout Shift?
Answer and reasoning
It tells the browser the element’s height before the content exists, so the box is laid out at its final size and following content is placed correctly. When the media loads, nothing above it needs to move. Without a reserved ratio, the element starts at zero height and pushes content down on load, which is the shift the metric penalizes.
Continue learning
Compare layout tools in CSS grid sizing and responsive images. Read the MDN aspect-ratio reference and try the HTML and CSS interview questions.