For years, forcing a fixed ratio onto a container, for instance so a video kept the same rectangular shape regardless of screen width, meant relying on a fairly unintuitive trick built around the percentage value of padding-top. The aspect-ratio property put an end to that detour by giving CSS a direct, readable way to say that a block must keep a given proportion between its width and its height, no matter what.
This property is particularly useful for videos, images, CSS Grid cards, and any component whose shape must stay stable while content is loading, which also avoids the layout shifts that hurt user experience and performance scores.
Definition
aspect-ratio is a CSS property that fixes the ratio between an element's width and its height. It generally takes two numbers separated by a slash, such as 16/9 for a widescreen video or 1/1 for a perfect square. Once this property is set, only one dimension, usually the width, needs to be defined, and the browser automatically computes the matching height.
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.avatar {
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 50%;
}The padding-top trick it replaces
Before aspect-ratio, the dominant technique relied on a quirk of CSS sizing: as a percentage, padding-top is always computed relative to the block's width, never relative to its height. By setting a padding-top of 56.25%, which is 9 divided by 16, on an empty container with an absolutely positioned element layered on top, it was possible to simulate a 16/9 ratio without ever writing it explicitly.
/* Legacy trick, before aspect-ratio */
.video-wrapper-legacy {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9 / 16 */
}
.video-wrapper-legacy iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}This technique worked, but it required a manual percentage calculation, an absolutely positioned container, and it was far less direct to read than the simple line aspect-ratio: 16 / 9;. It remains useful to recognize when reading older code, but there is no longer any reason to write it in a new project.
How to use it in practice
The property accepts either two numbers separated by a slash or a single decimal number, both notations being equivalent. It can also take the value auto, which lets the browser derive the ratio from the content's intrinsic dimensions, a behavior particularly useful for images whose proportions are not always known ahead of time.
.card {
aspect-ratio: 4 / 3;
}
.same-ratio {
aspect-ratio: 1.33; /* equivalent to 4 / 3 */
}
img {
aspect-ratio: auto; /* uses the image's natural dimensions */
}aspect-ratio and images
On an img tag, aspect-ratio becomes especially powerful when combined with object-fit. By setting a fixed ratio and adding object-fit: cover, it becomes possible to display images with very different proportions inside identical frames, without any distortion, which is exactly the desired behavior for a thumbnail grid or a portrait gallery. Our HTML and CSS course builds exactly this kind of thumbnail grid as a hands-on exercise, to lock in this aspect-ratio and object-fit combo before using it on a real project.
.thumbnail {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}The trap of content that outgrows the fixed ratio
aspect-ratio: 1 / 1. By default, aspect-ratio does not clip anything: content can overflow the block if its natural height is taller than the height imposed by the ratio, unless a property such as overflow: hidden or min-height is added to contain that overflow. The ratio fixes the shape of the container, it never guarantees that the content will fit inside it.Summary table
| Value | Effect |
|---|---|
16 / 9 | Widescreen video format, the most common choice for video players |
1 / 1 | Perfect square, useful for avatars and thumbnails |
4 / 3 | Closer to square format, often used for cards |
auto | The browser uses the content's intrinsic dimensions |
Frequently asked questions
aspect-ratio work in every current browser?Yes, the property has been supported by every recent version of Chrome, Firefox, Safari and Edge for several years, which makes it a reliable replacement for the padding-top hack in virtually every current project, including those that still need to support somewhat older browsers.
aspect-ratio are all set at once?When all three values are explicitly defined, the width and height set directly take priority over the automatic ratio calculation, which only steps in to fill the missing dimension. Setting all three at the same time therefore usually makes the aspect-ratio property redundant, except in certain cases combined with a Media query.
aspect-ratio be used inside a CSS grid?Yes, and it is actually one of its most common uses: inside a grid where every cell needs to keep an identical shape regardless of the computed column width, aspect-ratio produces perfectly consistent cards or thumbnails without ever having to calculate a height in pixels.