Aspect Ratio Calculator
Compute simplified ratios and CSS aspect-ratio from width×height or presets. Paste resolution strings or lock a ratio while editing. Everything stays in your browser.
Examples (click to try)
—
Ratio
—
CSS aspect-ratio
—
Decimal (W/H)
How to Use the Aspect Ratio Calculator
Enter width and height, pick an example chip, or paste a string like 1920×1080 into the resolution field. The calculator reduces the dimensions to the simplest ratio and gives you a copy-ready CSS aspect-ratio value.
Turn on ratio lock when you want to resize an image, video frame, thumbnail or layout box without stretching it. Change either width or height, and the matching dimension updates from the current ratio.
Examples
- 1920×1080 → 16:9 /
aspect-ratio: 16 / 9 - 1080×1080 → 1:1 /
aspect-ratio: 1 / 1 - 1024×768 → 4:3 /
aspect-ratio: 4 / 3 - 1080×1920 → 9:16 (vertical video / stories)
- Ratio lock ON, width set to 1280 → height 720 (16:9 preserved)
Common Use Cases
- Finding the ratio for video exports, YouTube thumbnails and social images.
- Writing modern CSS with
aspect-ratio: 16 / 9instead of padding hacks. - Resizing screenshots and product images while preserving their proportions.
FAQ
Is my data sent to a server?
No. All calculations run in your browser; nothing is transmitted or stored externally.
What ratio is 1920×1080?
1920:1080 simplifies to 16:9. In CSS: aspect-ratio: 16 / 9.
How do I write CSS aspect-ratio?
Use the reduced width and height with a slash: 16 / 9, 4 / 3, 1 / 1. Integer ratios read clearer than decimals like 1.7778.
What is ratio lock for?
Keep a ratio such as 16:9 fixed while changing width — height recalculates automatically. Handy when adjusting export resolution without distorting.