How this instrument works
The CSS aspect-ratio property lets you set a desired width-to-height ratio directly on an element's box, so the browser keeps that shape even as the container or viewport resizes — for example `aspect-ratio: 16 / 9;` on a video wrapper, or `aspect-ratio: 1 / 1;` on an avatar image. As long as at least one of width or height is left automatic, the browser computes the other from the ratio, which is what lets a responsive embed reserve its correct box size before the actual media has finished loading.
Reserving that space matters for a real, measurable reason: without it, an image or video that loads after the surrounding text has rendered shoves everything below it downward the moment it appears, which is exactly the kind of layout shift that hurts Cumulative Layout Shift scores and makes a page feel janky to scroll. Setting aspect-ratio up front means the browser allocates the right amount of space immediately, before a single pixel of the image has arrived.
CSS will accept any two numbers as the ratio — `aspect-ratio: 1920 / 1080;` works exactly the same as `aspect-ratio: 16 / 9;` — but the simplified, reduced form is what every developer instantly recognises when reading the stylesheet later, and it's the same value the browser reduces to internally anyway. This instrument does that reduction for you: enter your element's actual pixel dimensions and it returns the exact fraction, in lowest terms, ready to paste into a `aspect-ratio` declaration.
- Enter your element's target width in pixels into Width (px) — for example 1920 for a full-width video embed.
- Enter the matching height in pixels into Height (px) — for example 1080.
- Read the simplified ratio directly beneath the inputs.
- Write it into your stylesheet as `aspect-ratio: ratioW / ratioH;` on the element you want to constrain.
- The property is Baseline widely available (supported in all major browsers since September 2021), so no fallback is generally required for modern projects.
Worked example — a 1920×1080 video embed
Enter 1920 into Width (px) and 1080 into Height (px) — a standard widescreen video frame. The greatest common divisor of 1920 and 1080 is 120, so dividing both by 120 gives a ratio width of 16 and a ratio height of 9. Simplified ratio reads 16:9, which you write directly into your stylesheet as `aspect-ratio: 16 / 9;` on the video container.
You could write `aspect-ratio: 1920 / 1080;` instead — CSS accepts any two numbers, reduced or not — but 16 / 9 is instantly recognisable to any developer reading the stylesheet later, and it's the same simplified value the browser computes internally regardless of which form you use.
Questions
What does the CSS aspect-ratio property actually do?
It sets a desired width-to-height ratio for an element's box. As long as one dimension (usually height) is left to size automatically, the browser calculates it from the ratio and the other, fixed dimension — so a video wrapper set to `width: 100%; aspect-ratio: 16 / 9;` always keeps its 16:9 shape as the page resizes, without any JavaScript.
Do I have to simplify the ratio, or can I use raw pixel values in CSS?
You can use raw values — `aspect-ratio: 1920 / 1080;` is valid and renders identically to `aspect-ratio: 16 / 9;`, since CSS just divides the two numbers. Simplifying is purely for readability and maintainability: a reduced ratio is instantly recognisable to anyone reading the stylesheet, while an unreduced pair like 1920/1080 makes a reader do the division themselves.
What ratio should I use for an Open Graph share image in CSS?
The standard recommended Open Graph image size is 1200×630 pixels, which reduces to 40:21 in lowest terms — not the tidier 1.91:1 figure developers often hand-round to. If you want a preview box on your page that matches an OG image's true proportions exactly, `aspect-ratio: 40 / 21;` is the precise value rather than an approximation.
Does aspect-ratio work in all browsers?
The property is 'Baseline widely available,' meaning it has worked consistently across all major browsers — Chrome, Firefox, Safari and Edge — since September 2021. For projects that must support browsers older than that, a fallback using the padding-top percentage trick is still sometimes used, though it's rarely necessary today.
How does aspect-ratio prevent layout shift?
By reserving the correct box dimensions before the image or video has actually loaded. Without a defined ratio, the browser doesn't know how tall to make the element until the media file arrives, so surrounding content jumps once it does. Setting `aspect-ratio` up front tells the browser the final shape immediately, which keeps the layout stable and improves Cumulative Layout Shift scores.