Aspect ratio calculator

What this aspect ratio calculator does

The calculator keeps width and height locked to a ratio: set the ratio, type one side, and the other is solved instantly. It also works backwards, reducing any width and height you enter to the smallest whole-number ratio, and it emits the matching CSS aspect-ratio declaration with a copy button. Use it when you need the export size for a 16:9 thumbnail at a specific width, the height of a 4:3 iframe in a 720px column, or a quick check of what ratio a stock photo actually has.

How to use it

1. Enter the Aspect ratio in the two fields (width first, then height), or click a preset: 16:9, 4:3, 1:1, 3:2 or 21:9.
2. Type a Width (px). The height updates to keep the ratio. Or type a Height (px) and the width updates instead.
3. Read the outputs. Size is the current width × height, Ratio is the simplified ratio of those two numbers, and CSS is aspect-ratio: W / H; ready to paste.
4. To find the ratio of an existing image, type its width and height; the Ratio output shows the reduced form. Note that typing a width still re-solves the height from the ratio fields, so enter the height last.

Common ratios and resolutions

Ratio	Decimal	Where you meet it	Standard sizes
16:9	1.778	HD and 4K video, YouTube, laptops, TVs, Open Graph images (1200×630 is close)	1280×720, 1920×1080, 2560×1440, 3840×2160
4:3	1.333	Older monitors and TVs, iPad, many webcams, presentations	800×600, 1024×768, 2048×1536
3:2	1.5	35mm film, DSLR and mirrorless photos, Surface devices	1080×720, 3000×2000, 6000×4000
1:1	1	Avatars, Instagram feed, product thumbnails, app icons	512×512, 1080×1080
21:9	2.333	Ultrawide monitors, cinematic hero banners	2560×1080, 3440×1440
9:16	0.5625	Vertical video: Stories, Reels, TikTok, Shorts	1080×1920
2:3	0.667	Pinterest pins, posters, book covers	1000×1500
1.91:1	1.91	Facebook and Twitter link cards	1200×628
5:4	1.25	Classic 1280×1024 monitors, 8×10 prints	1280×1024

A few “16:9” sizes are not exact. 1366×768 simplifies to 683:384 and 1360×768 to 85:48; both display as 16:9 but will give you decimals if you scale them. Check with the Ratio output before relying on a size.

Worked examples

• Thumbnail at 400px wide, 16:9. Ratio 16:9, width 400 → height 225. CSS: aspect-ratio: 16 / 9;
• Fit a 4:3 video into a 300px-tall slot. Ratio 4:3, height 300 → width 400.
• What ratio is 1200×630? Enter width 1200 then height 630 → Ratio 40:21 (1.905), which is why it works as a 1.91:1 social card.
• Square avatar from a 3:2 photo. You cannot change ratio by scaling; crop to 1:1 first, then scale. The calculator tells you the crop target: for a 3000×2000 photo, 2000×2000.

CSS aspect-ratio vs the padding hack

The modern way is one declaration:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video iframe {
  width: 100%;
  height: 100%;
}

aspect-ratio sets a preferred ratio that the box keeps as long as only one dimension is constrained. If you set both width and height, or content forces the box taller, the explicit size wins; add overflow: hidden or min-height: 0 when that matters. It works on any element, including img, video and grid items, and it also tells the browser how tall an image will be before it loads, which prevents layout shift. Setting width and height attributes on img achieves the same reservation and is still worth doing.

Before 2021 the only option was the padding hack: percentage padding-top is resolved against the element’s width, so padding-top: 56.25% (9 ÷ 16) creates a 16:9 box, and the content is absolutely positioned inside it.

.ratio-box {
  position: relative;
  padding-top: 56.25%; /* 9 / 16 */
}
.ratio-box > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

It still works everywhere, but it needs a wrapper, breaks if the child is not absolutely positioned, and cannot be applied to the media element directly. Use aspect-ratio unless you need to support browsers from before 2021. The aspect-ratio box snippet has both versions ready to copy.

Quick padding percentages: 16:9 = 56.25%, 4:3 = 75%, 3:2 = 66.667%, 1:1 = 100%, 21:9 = 42.857%, 9:16 = 177.778%.

Related tools and snippets

• Aspect ratio box snippet with the modern property and the padding fallback.
• CSS unit converter to turn a solved px width into rem for your layout.
• Image compressor to resize and compress the image once you know the target size.
• Favicon generator for square (1:1) icon exports at every required size.
• Responsive auto grid for card grids where every card should share one ratio.