CSS
Aspect Ratio Calculator
Lock a ratio and solve the missing width or height instantly.
Both dimensions stay locked to the ratio — edit either one and the other follows.
- Simplified ratio
- 16:9
- Decimal
- 1.78
- Dimensions
- 1920 × 1080
aspect-ratio: 16 / 9;
How it works
An aspect ratio is simply width ÷ height reduced to whole numbers, so a 1920×1080 frame is 16:9. Keeping a fixed ratio matters whenever something has to scale without distorting — images, video, iframes and responsive hero sections.
Choose a ratio from the presets or type a custom one, then enter either dimension. The other is solved instantly and stays locked, so editing width or height always keeps the pair in proportion. You also get the simplified ratio, the decimal value and a copy-ready aspect-ratio CSS declaration.
It’s all arithmetic running in your browser — nothing is fetched or sent.
Frequently asked
How do I calculate an aspect ratio?+
An aspect ratio is width divided by height, expressed as two whole numbers — 1920×1080 reduces to 16:9. This tool does both directions: pick a ratio and it solves the missing dimension, or type a width and height and it shows the simplified ratio and decimal for you.
How do I resize an image while keeping its aspect ratio?+
Lock the ratio to your image’s current one (or a target like 16:9), then type the new width — the height that preserves the ratio is filled in automatically. Because both fields stay locked, editing either dimension keeps the other in proportion, so the image never stretches.
What are the most common aspect ratios?+
16:9 is the standard for video and most screens; 4:3 is classic photography and older displays; 1:1 is square (social avatars, some feed posts); 9:16 is vertical video and stories; 3:2 matches most DSLR photos; and 21:9 is ultrawide/cinematic. All of these are one-tap presets here, and you can enter any custom ratio too.
What is the CSS aspect-ratio property?+
aspect-ratio lets an element hold its proportions as it scales, which prevents layout shift while images and embeds load. The tool outputs a ready-to-copy declaration like aspect-ratio: 16 / 9; for whatever ratio you’ve set.
Is anything sent to a server?+
No. Every calculation is plain arithmetic done in your browser — nothing you type is fetched or sent anywhere.
More free tools
All toolsCSS Selector Tester
Paste HTML, type a selector, see exactly what it matches.
Open toolCSS Grid Generator
Build a CSS grid visually and copy the code.
Open toolCSS Box-Shadow Generator
Design layered box-shadows with live sliders and copy the CSS.
Open toolMore tools shipping weekly.
Get the proportions right, then get sign-off
Locking a ratio keeps a design from stretching. Shotline keeps feedback just as precise — clients pin comments on the live page, each one tied to the exact element it’s about.
No signup needed. Free demo canvases stay live for 72 hours.
or start your 14-day free trial — no card required.