Solve for the missing dimension.
Work either direction: get the simplified ratio from a width and height, or lock a ratio and solve for the dimension you are missing.
Ratio math happens in the browser. Nothing is uploaded.
What it does
About the Aspect Ratio Calculator.
An aspect ratio calculator finds the missing width, height, or simplified ratio from the two values you already know, including a CSS aspect-ratio string.
Thumbnails, video embeds, and og images all need a locked frame. You can start from pixels and get 16:9, or lock a ratio and solve for the side you still need to export.
How to use
Three steps.
Set
Enter any two of width, height, or ratio.
Read
Read the missing dimension and the simplified ratio.
Copy
Copy the CSS aspect-ratio value or the pixel pair into your layout.
When to use it
Where it helps.
Use it when cropping case-study stills, sizing a dashboard preview, or matching a video embed to a card. Recalculate if you change the container, not only the asset.
FAQ
FAQ.
How do I get a CSS aspect-ratio value?
Enter width and height (or a known ratio). Copy the simplified pair into aspect-ratio, for example 16 / 9.
Can I solve for a missing side?
Yes. Lock the ratio and one dimension, and the tool computes the other. That is useful when an export target is a fixed width.
Does this upload my images?
No. It is arithmetic in the browser. You never need to upload a file to get the ratio.
What are common ratios for product UI?
16:9 and 4:3 are common for media. 1:1 suits avatars. 3:2 and 2:1 show up in cards and og images. Always confirm against the layout, not only convention.
More tools
layout
Spacing/Sizing Scale Calculator
Build a spacing scale from a base unit, linear or geometric.
layout
CSS Grid Generator
Set columns, rows, and gap, then copy production CSS Grid.
layout
Flexbox Playground
Tune flex-direction, wrap, justify-content, align-items, and gap on a live playground.