Aspect Ratio & Resolution Calculator
runs in your browserReduce any size to its aspect ratio and name it, resize keeping it with even rounding, fit it into a frame with letterbox maths, and get PPI from a diagonal.
about this tool
Any size, its ratio, and its name
Type a size — 1920 × 1080, 1920x1080, 1920 1080 — or a ratio — 16:9,
16/9, 2.39 — and the tool reduces it by the greatest common divisor to
its smallest whole-number form, gives the decimal (1.78:1), and finds the
nearest of the ratios that have names. When the match is exact it says so;
when it is close it says how close, because real sizes are often not quite
what they are sold as: 1366 × 768 reduces to 683:384 and is 16:9 to within
0.05 %, ultrawide "21:9" monitors are actually 64:27, and 3440 × 1440 is
nearer the 2.39:1 of cinema than to 21:9. The named ratios are clickable,
and the pixel count and megapixels appear when the input looks like pixels
rather than a bare ratio.
Two CSS snippets come with the ratio: the modern aspect-ratio: 16 / 9 and
the padding hack that preceded it (padding-top: 56.25%, height as a
percentage of width), for the sites that still need it.
Resizing
Give a new width or height and the other dimension follows at the same ratio. The result is rarely a whole pixel — 1000 wide at 16:9 is 562.5 tall — so the rounding is a choice: even (the default; video encoders store colour in 2 × 2 blocks and refuse odd sizes), nearest, or exact to keep the fraction. Whichever you pick, the tool states the exact figure, how far the rounding moved it, and the ratio you actually end up with.
Below the resize is every standard resolution that shares the ratio to within half a percent — for 16:9 that is 720p through 8K plus the not-quite 1366 × 768 — and, for pixel sizes, the whole-pixel multiples (½, ¾, 2×, 3×) that scale cleanly.
Fitting into a frame
Given content and a frame, contain is the largest size of the content that fits inside with its ratio intact, and cover the smallest that fills the frame. Contain leaves bars — letterbox above and below when the content is wider, pillarbox either side when narrower — and the tool gives their size each, in total and as a share of the frame. Cover crops instead, and the tool gives what is lost from each side. A diagram shows the frame in ink and the content in green so the two cases read at a glance.
Screens
Resolution and a diagonal in inches give pixels per inch (diagonal in pixels over diagonal in inches), the dot pitch in millimetres, the panel's width and height in inches and centimetres, its area, and the distance beyond which a person with 20/20 vision can no longer resolve individual pixels — one pixel per arcminute. That last figure is what "retina" means in practice: a 27-inch 4K monitor at 163 ppi crosses the line at about 53 cm.
Limits
Everything assumes square pixels and a rectangular panel; anamorphic pixel ratios, curved screens and rounded corners are not modelled. The diagonal should be the panel's active area, not the case, or the density comes out low. The standard-resolution list covers common computer, video and social sizes, not every phone ever made, and the tolerance for "shares this ratio" is half a percent. Nothing is stored; the calculator is stateless.
To apply the numbers to an actual file, image resize & crop takes them directly. For the CSS side — turning a ratio into rem or a Tailwind step — see px ↔ rem ↔ em ↔ pt.
questions
- How do I work out the aspect ratio of a resolution?
- Divide both sides by their greatest common divisor. 1920 × 1080 share 120, giving 16:9; 1920 × 1200 share 240, giving 8:5, which is sold as 16:10. Some sizes do not reduce neatly: 1366 × 768 is 683:384, which is 16:9 to within 0.05%, and the tool says so rather than leaving you with the ugly fraction.
- Why does my video need even dimensions?
- Most video encoders store colour at half resolution (4:2:0 chroma subsampling), so each colour sample covers a 2 × 2 block of pixels and the frame must be an even number of pixels in each direction. Resize with rounding set to even and 1000 wide at 16:9 gives 562, not 562.5 or 563.
- What are letterbox and pillarbox bars?
- Letterbox bars sit above and below a picture that is wider than its frame; pillarbox bars sit either side of one that is narrower. A 2.39:1 film on a 16:9 screen has letterbox bars of about 138 pixels each at 1080p, a quarter of the screen in all. The fit calculator gives the exact figures for any pair.
- How is PPI calculated?
- Pixels per inch is the diagonal in pixels — the square root of width² plus height² — divided by the diagonal in inches. A 27-inch 4K monitor is 4406 pixels across the diagonal, so 163 ppi; the dot pitch is 25.4 mm divided by that, 0.156 mm.
- What does “pixels vanish beyond” mean?
- The distance at which one pixel spans one arcminute of vision, the resolving limit of 20/20 eyesight. Beyond it the pixel grid is invisible and more resolution buys nothing. For a 163 ppi monitor that is about 53 cm, which is why 4K at 27 inches looks smooth from a normal desk.