Why it matters
Images and videos that load without a reserved shape make the page jump as they arrive. That jump is Cumulative Layout Shift, one of Google's Core Web Vitals. Giving every media box a fixed aspect ratio stops it.
Ratios also matter whenever you resize: a hero image at 1920 × 1080 needs to be 1280 × 720 at the next size down, and a social share image must be 1.91:1. This calculator does the maths and gives you the CSS.
How it works
- InputA width and height, or a ratio
- In your browserReduced by greatest common divisor
- OutputThe ratio, matching sizes and aspect-ratio CSS
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Ratio | Width ÷ height |
|---|---|
| 21:9 | 2.333 |
| 16:9 | 1.778 |
| 1.91:1 | 1.91 |
| 3:2 | 1.5 |
| 4:3 | 1.333 |
| 1:1 | 1 |
| 4:5 | 0.8 |
| 9:16 | 0.562 |
How to use it
- Type a width and height, or pick a preset.
- Keep the lock on and change one side to work out the other.
- Check the list of common sizes at that ratio.
- Copy or download the CSS.
FAQ
What does CSS aspect-ratio do?
It sets a box's height from its width (or the other way round), so the space is reserved before the image or video loads. It's supported in every current browser.
Do I still need width and height on img tags?
Yes. Browsers use the width and height attributes to work out the ratio before the CSS loads. Add both, then set height: auto in CSS.
Why does 1366 × 768 not show as 16:9?
Because it isn't exactly: it reduces to 683:384. The calculator shows the exact ratio and the nearest common one.
What ratio do share images use?
1.91:1, which is 1200 × 630. Instagram posts work best at 4:5 and stories at 9:16.
