Aspect Ratio
Solve the missing dimension for a target ratio
An aspect ratio is the proportion between width and height, written as two numbers reduced to their simplest form. 1920 by 1080 and 1280 by 720 are both 16:9, because both reduce to the same fraction. Solving for a missing dimension is one multiplication, but doing it repeatedly by hand is where rounding errors and off-by-one pixel gaps come from.
Ratios matter because mismatching them distorts or crops. A 16:9 video in a 4:3 frame either gains bars or loses the edges of the picture; a thumbnail generated at the wrong proportion stretches faces. Knowing the target ratio and solving exactly for the other dimension avoids both.
How to use it
- Set the ratioEnter it directly, such as 16:9 or 4:5, or start from a preset for common video, photo and social formats.
- Enter the dimension you knowGive either the width or the height and the other is solved for you, kept exact rather than rounded at each step.
- Round deliberatelyPixel dimensions must be whole numbers, so decide whether to round the result or nudge the ratio. For video, even numbers matter — many codecs require dimensions divisible by two.
Frequently asked questions
What are the most common aspect ratios?
16:9 is the standard for video and most displays. 4:3 is the older television and tablet shape. 1:1 is square, 4:5 and 9:16 are the portrait formats social platforms favour, and cinema uses wider ratios such as 2.39:1. Photography still commonly uses 3:2, inherited from 35mm film.
How do I calculate a missing dimension?
Multiply the dimension you have by the ratio of the two sides. For 16:9 with a width of 1440, the height is 1440 × 9 ÷ 16 = 810. The arithmetic is trivial; the value of doing it properly is not accumulating rounding error across a set of sizes that must stay consistent.
What is the difference between aspect ratio and resolution?
Resolution is the actual pixel count; the ratio is the shape those pixels form. 3840 by 2160 and 1920 by 1080 share a ratio of 16:9 but differ fourfold in resolution. Two images can have identical resolution and different ratios, and vice versa.
Why must video dimensions often be even numbers?
Because of chroma subsampling. Formats such as 4:2:0 store colour at half resolution in each direction, so the picture is processed in two-by-two blocks and an odd dimension leaves an incomplete block. Many encoders will refuse the input or silently pad it.
How do I keep a ratio in CSS?
The aspect-ratio property does it directly: aspect-ratio: 16 / 9 on a container reserves the right shape at any width. It also prevents layout shift, because the browser knows the height before the image loads — which is worth doing for its effect on Cumulative Layout Shift alone.