The aspect-ratio property keeps an element at a fixed width-to-height ratio, such as 16:9 for video or 1:1 for squares, while its size stays flexible. Pick a value below to see it live, or type your own.
aspect-ratio: auto | <width> / <height>; aspect-ratio: 16 / 9; aspect-ratio: 1; /* same as 1 / 1 */
Set a width (or let the layout decide it) and the browser calculates the height for you.
| Ratio | Typical use |
|---|---|
16 / 9 | Videos, YouTube embeds, hero banners |
4 / 3 | Classic photos, presentation slides |
3 / 2 | Camera photos |
1 / 1 | Avatars, product thumbnails, Instagram-style grids |
9 / 16 | Vertical video, stories, phone screenshots |
21 / 9 | Ultra-wide banners |
Before aspect-ratio, keeping an iframe at 16:9 needed the "padding-top: 56.25%" hack with an extra wrapper. Now it is one line:
iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
Combine aspect-ratio with object-fit: cover so every card image has the same shape, whatever the original photo size. Reserving the space also stops the page from shifting while images load.
.card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
If the element has both a fixed width and a fixed height, or its content is taller than the ratio allows, the ratio is ignored. Set only the width, and add min-height: 0 or overflow: hidden if content pushes it taller.
Yes, all current browsers support it (Chrome 88, Firefox 89 and Safari 15 onwards).
Give it a width and aspect-ratio: 1 / 1. The height will always equal the width.