Aspect Ratio Calculator

An aspect ratio is width divided by height, expressed as two whole numbers. 16:9 means sixteen units across for every nine down, which is 1.7778 — and a 1920 × 1080 screen, a 1280 × 720 video and a 3840 × 2160 television are all the same shape.

Type one dimension and the other follows. Whichever field you last edited is the one held constant. The reduced form underneath answers the question from the other direction: given 1512 × 982, what ratio is that? Divide both by their greatest common divisor and you have it.

The CSS property is the part that matters most. Setting aspect-ratio: 16 / 9 on a container makes the browser reserve exactly the right space before the image or video has downloaded. Without it, the box is zero-height until the file arrives and then everything below jumps down — which is most of what a poor Cumulative Layout Shift score is made of, and it is a Core Web Vital.

Some ratios are not whole numbers. A4 paper is 1:√2, chosen so that folding it in half gives the same shape again — which is why A4, A5 and A3 are all proportional. The preset here approximates it as 1414:1000, which is accurate to four decimal places and rather easier to type.

A real case. You need a thumbnail 400px wide, matching your 16:9 video. Type 400 into width and you get 225. Not 240, which is what you get by halving 480 without thinking, and not 250, which is what looks about right. Nine-sixteenths of 400 is 225, and anything else stretches faces.

The vertical ratios are the ones people get wrong. 9:16 is not 16:9 rotated in your head. It is a different number, and Instagram Stories, TikTok and YouTube Shorts all use it. Press "Turn it on its side" and watch the dimensions swap correctly.

1.91:1 is the one nobody remembers. It is the Open Graph preview ratio — 1200 × 630 — and it is neither 16:9 nor 2:1. A share image made at 16:9 gets cropped top and bottom, which is how a logo ends up with its edges shaved off in every feed. The meta tag generator declares the dimensions; this tells you what they should be.

Contain, cover, or neither. If your source is a different ratio from your target, something must give. object-fit: contain shows all of it and leaves bars; cover fills the box and crops. Stretching it — no object-fit at all, both dimensions forced — is the only genuinely wrong answer, and it is what happens by default.

To actually change an image to these dimensions, the resizer keeps the ratio for you, and the cropper handles the case where the ratio has to change.