ColorKitFree aspect ratio calculator
Solve the side, name the ratio behind it
Free and no signup: type a width and the height that holds 16:9, 4:3, 2.39:1 or any pair you type appears beside it, optionally snapped to an even number because an H.264 encoder will refuse 1707 × 960. Feed it the other way and 1512 × 982 comes back as 756 : 491 — its exact reduction by a greatest common divisor of 2 — next to 17 : 11, the simplest fraction still within 0.5% of the same shape. The pair then writes itself out as an aspect-ratio rule, with a line naming the axis the browser computes and the one case where it discards the property entirely.
- 100% free
- No signup
- 13 named ratios
- GCD and tolerance
- Even-number snap
Solve for the missing side
1440 × 810
Height before rounding: 810px
Reduce a size to a ratio
- Exact reduction — GCD 2
- 756 : 491
- As a decimal
- 1.539715
- Simplest pair within 0.5%
- 17 : 11 (0.373% off)
- Nearest named ratio
- 3:2 — +2.65%. Keep the width and the height would be 1008; keep the height and the width would be 1473.
Press Ctrl+V anywhere on the page to drop in a size like 1512×982 or a ratio like 16:9 — no need to click the field first.
Shape at this ratio
Drawn at 1.7778 to 1, capped at 320px on the long edge.
CSS aspect-ratio
Written as you typed it; the engine divides it out either way.
.media {
aspect-ratio: 16 / 9;
width: 100%;
}The width comes from the container and the height is computed from it, so the box holds 1.7778 at every viewport width — 1200px of container gives 675px of height.
Standard ratios
| Ratio | Decimal | Where it comes from | Typical size |
|---|---|---|---|
| 0.5625 | Reels, Stories, TikTok, Shorts | 1080 × 1920 | |
| 0.8 | Instagram portrait feed | 1080 × 1350 | |
| 1 | Avatars, square posts, sprite cells | 1080 × 1080 | |
| 1.25 | 8×10 print, 1280×1024 panels | 1280 × 1024 | |
| 1.3333 | iPad, Micro Four Thirds, SD video | 2048 × 1536 | |
| 1.5 | 35 mm frame, most DSLRs, Surface | 3000 × 2000 | |
| 1.6 | MacBook and Surface class panels | 2560 × 1600 | |
| 1.7778 | HD, UHD, YouTube, most monitors | 1920 × 1080 | |
| 1.85 | US theatrical flat | 1998 × 1080 | |
| 2 | Univisium, streaming drama | 2048 × 1024 | |
| 2.3333 | Marketing name only — no panel is cut to it | — | |
| 2.3704 | What a 2560×1080 ultrawide really is | 2560 × 1080 | |
| 2.39 | Anamorphic scope since SMPTE 1970 | 2048 × 858 |
Clicking a ratio loads it into the solver above. 21:9 and 64:27 are both listed because a monitor advertised as the first is manufactured as the second — 2.3704 against 2.3333, 1.6% wider than the name on the box.
How to get the dimension you are missing
One side and a ratio in; the other side, its rounding error and the CSS out.
Choose the ratio, then type the side you already know
Pick one of the 13 named ratios or type your own pair — 1.85 and 1 are as valid as 16 and 9. Whichever of the width and height fields you touch becomes the one that drives; the other is marked computed and follows it. Typing into the computed field simply hands it the driving role, so you never have to say which direction you are solving in.
Round the answer for whatever consumes it
The exact answer is usually fractional — 1440 wide at 16:9 gives 810 exactly, but 1000 wide gives 562.5 — so the rounding control offers whole pixels, even numbers, or multiples of 4, 8 and 16. Every choice reports the ratio you actually end up with and how far that is from the one you asked for, in per cent, because rounding a side always moves the shape a little and it is better to see by how much than to discover it in a diff.
Reduce a size, or take the CSS
The second panel goes the other way: give it two pixel dimensions and it prints the exact reduction with its greatest common divisor, the decimal, the simplest fraction inside 0.1 to 2 per cent, and the nearest named ratio with the crop that would make the match exact. The CSS panel turns the same ratio into an aspect-ratio declaration, and changing what the box is already constrained by rewrites the sentence underneath explaining what the browser does with it.
Technical specifications
| Named ratios | 13 entries from 9:16 (0.5625) through 1:1 to 2.39:1 (2.39), each with its decimal, its origin and a typical pixel size; clicking one loads it into the solver |
|---|---|
| Input limits | Dimensions above 0 and up to 100,000 px, ratio parts up to 10,000; anything with a unit, a comma or a second decimal point is rejected by name rather than silently coerced |
| Exact reduction | Euclidean GCD on the rounded integers — 1920 × 1080 divides by 120, 2560 × 1080 by 40, 3440 × 1440 by 80, 1512 × 982 by 2 |
| Tolerant reduction | Smallest denominator from 1 to 4096 whose fraction sits within 0.1%, 0.5%, 1% or 2% of the true ratio; 1512 × 982 returns 17 : 11 at 0.5% and 20 : 13 at 0.1% |
| Rounding modes | Exact, whole pixels, even numbers, or multiples of 4, 8 and 16, each reporting the ratio actually achieved and its drift in per cent to three decimals |
| Sub-pixel results | A height of 562.5px is real, not a display artefact: Blink lays out on a 1/64 px LayoutUnit and Gecko on 1/60 px app units, so both can honour a half pixel |
| CSS output | aspect-ratio in its reduced form plus the constraining declarations for four cases — fluid width, capped width, fixed height, and both axes set — with object-fit added for img and video |
| Data handling | Every figure is computed in this tab and nothing is stored: the dimensions never reach a server, a log or the URL, so a link copied from the address bar carries none of them |
Frequently asked questions
What aspect ratio is 1920 × 1080?
16:9, because both numbers divide by 120. That is the point of the reduction: 1920 ÷ 120 = 16 and 1080 ÷ 120 = 9, and every other 16:9 size is the same fraction scaled — 1280 × 720 divides by 80, 3840 × 2160 by 240. The decimal all of them share is 1.7778, which is the number worth memorising, because a size only counts as 16:9 if its width divided by its height lands on it.
Why does my window size reduce to something like 756 : 491 instead of a clean ratio?
Because the greatest common divisor of your two numbers is tiny, and nothing about a browser window is obliged to be round. The 13-inch MacBook Air reports 1512 × 982 CSS pixels, whose GCD is 2, so the exact reduction is 756 : 491 and it is correct and useless at the same time. What you want in that situation is the simplest fraction that is close enough, which is why this page also prints 17 : 11 at 0.5% tolerance and 20 : 13 at 0.1% — and 20 : 13 is exactly what the panel's own 2560 × 1664 hardware reduces to.
Is a 21:9 ultrawide monitor really 21:9?
No. A 2560 × 1080 panel is 64:27, which is 2.3704, and a 3440 × 1440 panel is 43:18, which is 2.3889 — the marketing name of 21:9 would be 2.3333, about 1.6% narrower than either. The reason is that 64:27 is 4:3 cubed, the third term in the series that also contains 16:9 as 4:3 squared, so a panel that size divides neatly into 16:9 windows. Nothing breaks because of the mislabel, but a layout cut to a true 21:9 will letterbox on a real ultrawide.
Why is my aspect-ratio declaration doing nothing?
Almost always because both axes are already definite. aspect-ratio sets a preferred size for the axis that is auto, so if width and height are both specified the box uses them and the ratio is ignored without a warning. The other common cause is a competing constraint that wins later: max-height, a stretched grid or flex item, or a percentage height inherited from a parent will all override the size the ratio computed. Set one axis, leave the other alone, and the property behaves.
What happens when the content is taller than the ratio allows?
It depends on what kind of box you put the ratio on, and this catches people out. A block-level box takes the computed height as definite, so extra content overflows it and spills over whatever is below. The same element as a flex or grid item behaves differently: its automatic minimum size is content-based, so instead of overflowing it stretches taller than the ratio you asked for. Setting min-height: 0 on the item — or min-width: 0 in a row — restores the ratio, and overflow: auto keeps a block honest.
Do I still need the padding-top: 56.25% trick?
No, not for any browser still receiving updates. The hack worked because vertical padding resolves against the containing block's width, so 9 ÷ 16 = 56.25% produced a 16:9 box, at the cost of an absolutely positioned child and a magic number nobody could read. The real property shipped in Chrome and Edge 88 in January 2021, Firefox 89 that June and Safari 15 in September 2021, so the last engine to lack it went out of support years ago. Keep the hack only in code that must serve Safari 14.
Why does my encoder reject a 1707 × 960 export?
Because 1707 is odd and H.264 in its usual 4:2:0 chroma mode stores one chroma sample per 2 × 2 block of luma, which requires both dimensions to be even. 960 tall at 16:9 works out to 1706.67 wide, and rounding up to the nearest whole pixel lands on the one value the encoder cannot take. Set the rounding control to even numbers and it returns 1706, which is 0.04% off true 16:9 — invisible, and it encodes. Some older hardware profiles want multiples of 16, the macroblock size, which is the last option in the same list.
About aspect ratios, their reductions and the CSS property
16:9 was reverse-engineered rather than chosen. Kerns Powers of SMPTE cut rectangles of equal area for every format then in use — 1.33 television, 1.66 and 1.85 flat, 2.35 scope — stacked them on a common centre, and found that the smallest rectangle enclosing all of them and the largest rectangle fitting inside all of them had almost the same proportion: about 1.77, the geometric mean of the two extremes. That became 16:9, which is also exactly 4:3 squared, and the series continues: 4:3 cubed is 64:27, the true shape of the ultrawide monitors sold as 21:9. It is a family, not a set of arbitrary numbers, and it is why a 2560 × 1080 panel splits into two 16:9-ish halves so tidily while a genuinely 21:9 frame would not.
Reducing a real size to that family is where most calculators stop one step early. The greatest common divisor is exact and often unhelpful: 1920 × 1080 divides by 120 and gives you 16:9, but a browser viewport measured after device-pixel-ratio scaling and a few pixels of window chrome divides by 2 and gives you 756 : 491, which names nothing. The useful answer is the simplest fraction that is close enough, so this page searches denominators in order and returns the first one inside your tolerance — 17 : 11 within half a per cent, 20 : 13 within a tenth. The other thing to watch is the direction of the error. Rounding a solved side is not free, and whether 0.04% matters depends entirely on what receives the number: a video encoder does not care, whereas a sprite sheet whose cells must tile exactly does, and a print crop measured in millimetres cares about the third decimal.
The CSS property has one rule worth internalising: it sizes the axis you left alone. Give a box a width and aspect-ratio computes the height; give it a height and the width follows; give it both and the ratio is discarded silently. Everything people report as aspect-ratio being unreliable comes out of that rule meeting a second constraint — a stretched grid cell whose row is already sized, or a flex item whose content-based automatic minimum overrides the computed height until you set min-height: 0. On an img or a video the declaration replaces the file's own proportions, so object-fit then decides between cropping and distortion, and the width and height attributes browsers have mapped to a default ratio since Chrome 79 and Firefox 71 are still the cheapest fix for layout shift. One last caution: aspect-ratio interpolates, but every frame of that animation is a fresh layout pass over the box and everything after it in flow. A shape that has to move is better expressed as a scale transform inside a keyframe track or a single animation shorthand, with a hand-tuned easing curve doing the persuading — those frames are composited rather than measured.
Where these numbers are worked out
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
Nothing here is written to the address bar either. Some ratio calculators encode your dimensions into a shareable query string; this one keeps the four panels in memory, so a URL you copy from this page says only which tool you were on.