The CSS aspect-ratio property

Q: How do I keep an element at a 16:9 ratio in CSS?

Set aspect-ratio: 16 / 9 and a width. The height is calculated to keep the ratio as the width changes.

Q: How do I make a responsive video embed?

Give the iframe (or a wrapper) aspect-ratio: 16 / 9 and width: 100%. It replaces the old padding-top hack with a single line.

Q: What happens if I also set a height?

An explicit height (and width) takes priority over aspect-ratio. The ratio only applies when one dimension is left to be computed.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS aspect-ratio property holds an element at a set width-to-height ratio, e.g. aspect-ratio: 16 / 9. Set the width and the height follows automatically (or vice versa). It is the modern, one-line replacement for the old padding-top percentage hack used to size video embeds and image placeholders.

Overview

aspect-ratio tells an element to keep a particular width-to-height proportion. Give a box aspect-ratio: 16 / 9 and a width, and its height is worked out for you to match — resize the width and the height tracks it, ratio intact.

For years this needed an ugly trick: a wrapper with padding-top: 56.25% and an absolutely-positioned child, all to keep a responsive video embed at 16:9. aspect-ratio replaces that whole pattern with one declaration, and it works on any element — cards, image placeholders, embedded iframes.

One of its quietly valuable uses is reserving space before an image loads. Pair aspect-ratio with a width on an <img> and the browser holds the right amount of room from the start, so the page does not jump as images arrive — a real win for layout stability and Core Web Vitals. Note that if you set both an explicit width and height, those win over the ratio.

Syntax

selector {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Values

The aspect-ratio property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`ratio`	A width / height ratio such as 16 / 9 or 1 / 1.
`number`	A single number, the same as number / 1, e.g. 1.5.
`auto`	The element's natural ratio (for images) or none. The default.

Example

Live example

<style>
  .row { display: flex; gap: 12px; font: 600 13px system-ui, sans-serif; text-align: center; }
  .row div { flex: 1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
  .wide { aspect-ratio: 16 / 9; background: #1c7ce9; }
  .square { aspect-ratio: 1 / 1; background: #6d28d9; }
</style>
<div class="row">
  <div class="wide">16 / 9</div>
  <div class="square">1 / 1</div>
</div>

Best practices

Use aspect-ratio instead of the old padding-top percentage hack for responsive video and image containers.
Set it on images alongside a width to reserve space before they load, preventing layout shift.
Use simple, recognizable ratios — 16 / 9 for video, 1 / 1 for square thumbnails, 4 / 3 for classic photos.
Avoid also setting an explicit height; a fixed height overrides the ratio and defeats the point.

Frequently asked questions

How do I keep an element at a 16:9 ratio in CSS?

Set aspect-ratio: 16 / 9 and a width. The height is calculated to keep the ratio as the width changes.

How do I make a responsive video embed?

Give the iframe (or a wrapper) aspect-ratio: 16 / 9 and width: 100%. It replaces the old padding-top hack with a single line.

Does aspect-ratio prevent layout shift?

Yes — setting it on an image along with a width lets the browser reserve the correct space before the image loads, so the page does not jump.

What happens if I also set a height?

An explicit height (and width) takes priority over aspect-ratio. The ratio only applies when one dimension is left to be computed.

animation background

References