CrispUtils

Aspect ratio calculator

Type a ratio and one side, and the other appears. Presets cover video, social formats, Open Graph images and paper sizes, with a table of standard widths at whatever ratio you choose.

:
Size in pixels
×

Change either box — the other follows the ratio.

Your file is processed by your own browser. Nothing is uploaded, stored or logged.

Aspect ratio is the relationship between width and height. Keep it constant and a resized image looks correct at any size; change it and everything is stretched or squashed — a distortion people notice immediately even when they cannot name it.

The arithmetic is trivial and getting it wrong is common, usually because one dimension was rounded at an intermediate step. Enter your ratio and whichever side you know, and the matching side is calculated, along with a reference table of common widths and the correct height for each.

How to use this tool

  1. Pick a preset, or type your own ratio in the two ratio boxes.
  2. Type the width you need; the height updates. Type a height instead and the width updates.
  3. Check the preview rectangle to confirm the shape is what you expected.
  4. Use the table of standard widths if you are producing several sizes of the same asset.

Worked example

Resizing a hero image

Your design calls for a 16:9 banner and the container is 1440 pixels wide. Entering 1440 gives 810 pixels high. Exporting at exactly that avoids the browser scaling the image and softening it.

A vertical video from landscape footage

You need 9:16 for a phone-first placement and your source is 1920×1080. At 1080 wide the height is 1920 — so the frame has to be re-composed, not merely resized. The preview makes the extent of the crop obvious before you start.

Common use cases

  • Resizing images for a responsive layout
  • Exporting video at the right frame size for a platform
  • Sizing Open Graph and social share images
  • Scaling a design to a different screen or print size
  • Setting CSS aspect-ratio boxes so layouts do not jump while images load
  • Checking whether a crop is needed before starting work

Common mistakes

  • Rounding halfway through — Round only the final number. Rounding an intermediate value drifts the ratio and shows up as a one-pixel gap in a grid.
  • Assuming widescreen means 16:9 — Cinema is often 21:9 or 2.39:1. Fitting one into the other means letterboxing or cropping.
  • Confusing aspect ratio with resolution — 1280×720 and 1920×1080 are both 16:9. Ratio is shape; resolution is detail.
  • Forgetting device pixel ratio — An image displayed at 400 pixels wide on a high-density screen needs to be exported at 800 to look sharp.

Frequently asked questions

What does 16:9 actually mean?

For every 16 units of width there are 9 of height — a proportion, not a size. It is the standard for television, most video platforms and nearly all monitors.

Which ratio should I use for social images?

1200×630 (roughly 1.91:1) for Open Graph link previews, 1:1 for square feed posts, 9:16 for full-screen vertical stories and short video. This tool has presets for each.

How do I fit a 4:3 photo into a 16:9 space?

Either crop the top and bottom, or letterbox it with bars at the sides. There is no way to fit both without one or the other — stretching it is the one option to avoid.

What ratio is A4 paper?

210:297, which is 1:√2. Every ISO A size shares it, so halving an A4 sheet gives two A5 sheets of exactly the same proportion.

Why does my resized image look blurry?

Usually because it was scaled up beyond its original resolution, or exported at the CSS size on a high-density display. Export at twice the display size for retina screens.

Can I use a decimal ratio like 2.39?

Yes — put 2.39 in the first box and 1 in the second. The simplified ratio and decimal equivalent are both shown.

Last updated 2026-09-26