100% offline
CSS
Free · no signup
Updated
Aspect Ratio Calculator
An Aspect Ratio Calculator finds the missing width or height for a target ratio such as 16:9, and reduces any pair of dimensions to its simplest ratio, alongside the matching CSS aspect-ratio declaration.
:
Simplified
16:9Decimal
1.78CSS
aspect-ratio: 16 / 9;Legacy padding
padding-top: 56.25%;Dimensions
1920 × 1080About Aspect Ratio Calculator
Work in either direction: pick a ratio (16:9, 4:3, 3:2, 1:1, 21:9, 9:16, or a custom pair) and enter one dimension to get the other, or enter any width and height to see the simplified ratio, its decimal value, and the closest standard ratio. Every result comes with the modern CSS aspect-ratio declaration plus the legacy padding-top percentage for older layouts. All arithmetic runs locally.
What Aspect Ratio Calculator does
- Six presets plus any custom ratio
- Two-way: change width or height and the other follows
- Reduces arbitrary dimensions using the greatest common divisor
- Shows the decimal ratio and closest standard ratio
- Outputs CSS aspect-ratio and legacy padding-top
- Live proportion preview
When to reach for Aspect Ratio Calculator
- Resizing an image or video without distorting it
- Sizing a responsive embed container
- Working out what ratio an odd screen size actually is
- Picking export dimensions for a 16:9 or 9:16 platform
How to use Aspect Ratio Calculator
- 01
Choose a ratio
Pick a preset or enter a custom ratio.
- 02
Enter a dimension
Type a width or height and the other is calculated.
- 03
Copy the CSS
Copy the aspect-ratio declaration or the padding value.
When to use Aspect Ratio Calculator vs alternatives
| Alternative | Use Aspect Ratio Calculator when… | Use the alternative when… |
|---|---|---|
| Doing the arithmetic by hand | you want both directions, the reduced ratio, and copy-ready CSS at once. | it's a single trivial multiplication. |
| A design tool's constrain-proportions | you need the numbers and the CSS before opening a design file. | you're already resizing inside the design tool. |
Frequently asked questions
How do I calculate height from a 16:9 width?
Multiply the width by 9 and divide by 16 — a 1920px width gives 1080px. Pick the 16:9 preset, type the width, and the height is filled in for you.
What aspect ratio is 2560x1080?
Reduced by the greatest common divisor it is 64:27, a decimal of about 2.37, which is why such panels are marketed as ultrawide 21:9. Use the Find the ratio tab to reduce any dimensions.
Should I use aspect-ratio or the padding-top hack?
Use the CSS aspect-ratio property — it's supported in every evergreen browser. The padding-top percentage is only needed for very old browsers, and both are provided here.
Why isn't my ratio a clean number?
Rounding to whole pixels means some sizes can't hit a ratio exactly. The calculator rounds to the nearest pixel and shows the true reduced ratio so you can see the drift.