1 · Your size
The one you already have, in pixels, centimetres or whatever you use. As soon as you type it you will see the ratio.
3 · Scale without distortion
Type the width or the height you need and the other comes out at the same ratio. Your size above is left alone.
For your stylesheet
aspect-ratio: 16 / 9;Applied to the container of an image or video, it reserves the space before they load and prevents the layout jump.
How is an aspect ratio worked out?
01
Type the size you already have
The width and height of the image, video or container. Any unit works — pixels, centimetres, inches: a ratio has no units.
02
Read the simplified ratio
It is reduced by the greatest common divisor and, when it lands near a known ratio, named: 1366 × 768 is not an odd format, it is a rounded 16:9.
03
Scale without distortion
In the third block you type the new width and the height works itself out at the same ratio. Your starting size stays where it was.
04
Copy the CSS
The `aspect-ratio` rule reserves the space before the image loads, so the page does not make the jump that hurts your CLS.
The ratios people actually use
Each one comes from a physical constraint — a camera sensor, a television panel, a phone held in one hand — which is why they outlive the device that imposed them.
| Ratio | Where it is used | Typical size |
|---|---|---|
| 16:9 | Video, YouTube, slide decks and nearly every screen | 1920 × 1080 |
| 9:16 | Mobile vertical: stories, reels, shorts | 1080 × 1920 |
| 1:1 | Thumbnails, avatars and square posts | 1080 × 1080 |
| 4:5 | Feed portrait, the one that fills most of a phone | 1080 × 1350 |
| 1.91:1 | Preview image when a link is shared | 1200 × 630 |
| 4:3 | Phone photography, tablets and older projectors | 1600 × 1200 |
| 3:2 | DSLR and mirrorless photography, and paper prints | 3000 × 2000 |
| 21:9 | Ultrawide monitors and very wide hero images | 2560 × 1080 |
| 2.39:1 | Anamorphic cinema, the black bars of a film | 2048 × 858 |
The jump that makes you lose your place
It has happened to you: you are reading on your phone, an image higher up finishes loading, and the whole text jumps down. You lose your line. Or worse: you tap a button that is no longer where it was.
It happens because the browser had no idea how much room the image would need until it finished downloading. Tell it the proportion up front and it holds the space from the start, so when the image arrives nothing moves. It is the one line of styling you can copy above.
And it is not only about comfort: Google measures that jump on real visits to your site and takes it into account when ordering search results. In their jargon it is called Cumulative Layout Shift. It is one of the expensive problems that are cheapest to fix.
Frequently asked questions
What exactly is an aspect ratio?
The proportion between width and height, written as two numbers separated by a colon. 16:9 means that for every 16 units of width there are 9 of height — pixels, centimetres or metres. A ratio has no units, which is why a 320 × 180 thumbnail and a cinema screen share the same one.
How do you work it out by hand?
Divide width and height by their greatest common divisor. For 1920 × 1080 that divisor is 120, and the result is 16:9. To resize without distortion the formula is the same thing from the other side: new height = new width × original height ÷ original width.
Why does 1366 × 768 show as “≈ 16:9”?
Because its exact ratio is 683:384, which is 1.7786 rather than the 1.7778 of 16:9. That is a 0.05 % difference, invisible on screen, and it comes from manufacturing panels at round sizes. The tool flags it with “≈” instead of handing you a pair of numbers that mean nothing to anyone.
Which ratio should I use for social media?
Vertical 9:16 for stories, reels and shorts; 4:5 for the feed portrait, which fills most of a phone without being cropped; 1:1 for thumbnails and avatars; and 1.91:1 — 1200 × 630 pixels — for the preview image when someone shares a link. The table on this page lists them all with a typical size.
Can I change an image’s ratio without distorting it?
Not by stretching it: that warps faces and logos. You crop instead. Work out the target size here, cut what is left over on the long axis, and export. If the whole image has to fit with nothing cropped, the alternative is padding it with the background colour.
What if the height is not a whole number of pixels?
Round it. A pixel either way is invisible, but it does change the real ratio, so the tool shows you the one you are left with after rounding. If you are building a layout and need the proportion to stay exact, let CSS hold it with `aspect-ratio` instead of writing fixed sizes.
What is `aspect-ratio` in CSS for?
To reserve the space an image or video will take before it loads. Without that reservation the content below jumps when the file arrives, and that jump is what Cumulative Layout Shift measures — one of the three Core Web Vitals Google uses as a ranking signal.
What about the old percentage `padding-top` trick?
It still works, and this page gives you the calculated percentage, but it is only needed on very old browsers now. `aspect-ratio` has been available in every current browser since 2021 and reads far better than a container with an absolutely positioned child inside.
When the jump was not the image
Reserving the space removes that jump. When the site is still slow, the cause is usually further down: the fonts, the third-party scripts loading along the way, or a server that takes its time. That gets measured and fixed.
We reply within one business dayBogotá · UTC−5