# Aspect Ratio Calculator

Canonical URL: https://offlineutils.com/aspect-ratio-calculator
Category: CSS
Published: 2026-07-18
Publisher: offlineutils.com
Runs entirely in the browser; nothing entered into the tool is uploaded.

> 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.

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.

## Features

- 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

## Use cases

- 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 it

1. **Choose a ratio** — Pick a preset or enter a custom ratio.
2. **Enter a dimension** — Type a width or height and the other is calculated.
3. **Copy the CSS** — Copy the aspect-ratio declaration or the padding value.

## When to use it, and when to use something else

- **vs Doing the arithmetic by hand** — use Aspect Ratio Calculator when you want both directions, the reduced ratio, and copy-ready CSS at once. Use Doing the arithmetic by hand when it's a single trivial multiplication.
- **vs A design tool's constrain-proportions** — use Aspect Ratio Calculator when you need the numbers and the CSS before opening a design file. Use A design tool's constrain-proportions when 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.

## Related tools

- https://offlineutils.com/px-to-rem-converter
- https://offlineutils.com/image-compressor
- https://offlineutils.com/image-converter