Guide
Aspect ratios: finding, resizing and converting screen sizes
An aspect ratio is the shape of a rectangle written as width to height. It decides whether a video fits a player, whether a photo will crop on a social network, and how much vertical space a hero image reserves before it has loaded. People often know one dimension and need the other, or have an odd resolution and want to know which standard it matches. This calculator handles the three common cases and gives the CSS.
Finding the ratio
Divide both numbers by their greatest common divisor. For 1920 by 1080 the divisor is 120 and the result is 16:9. The page shows the decimal value, 1.7778, the CSS declaration aspect-ratio: 16 / 9; and the older padding-top: 56.25%;, which is 1080 ÷ 1920 expressed as a percentage. Next to these it names the closest common ratio and how far off it is: for 1920 by 1080 it is 16:9, “HD and 4K video, most screens”, off by 0%.
Odd sizes
Not every size reduces to something tidy. 1366 by 768 reduces to 683:384, and the page notes that this is probably not a standard shape because the reduced ratio has large numbers. The closest common ratio is 16:9, off by 0.05%. A 2560 by 1080 ultrawide reduces to 64:27 and is closest to 21:9, off by about 1.6%. This matters when you design for several devices: treat such sizes as their nearest standard and test the tiny difference.
Resizing to a ratio
On the Resize tab enter a ratio and the one side you know. With 16:9 and a width of 1280 the height is 720. With 4:5, the portrait format common for feeds, and a width of 1080 the height is 1350. The page shows the exact values and a rounded pair, because heights do not always come out as whole pixels. Use the rounded pair when you export images.
Screen size and density
The screen tab converts a diagonal, a ratio and a resolution into physical dimensions. For a 27 inch 16:9 monitor the width is 27 × 16 ÷ √(16² + 9²) = 23.53 inches (59.8 cm) and the height is 13.24 inches (33.6 cm). At 2560 by 1440 pixels the density is the pixel diagonal, about 2937, divided by 27 inches, which is 108.8 pixels per inch. The same panel at 3840 by 2160 gives 163.2 PPI. Marketing diagonals are rounded, so real panels differ slightly.
Common ratios
The reference table covers 1:1 for squares and avatars, 5:4 and 4:3 for older monitors and tablets, 3:2 for many cameras, 16:10 for laptops, 16:9 for video and most screens, 21:9 and 32:9 for ultrawides, 2:1 for banners, 4:5 for portrait feed images, 9:16 for vertical video and 2:3 for portrait photos and posters. Use them as targets when you crop.
Using the CSS
Set aspect-ratio: 16 / 9; on a container with a width, and the browser calculates the height. It works with object-fit to keep images from stretching, and it reserves space so the page does not shift when media loads. The padding hack puts the percentage on a wrapper with height: 0 and positions the content absolutely, a technique from before the property existed.
Edge cases
An element with an explicit height ignores the ratio. Content that is taller than the box can force the ratio to give way unless min-height: 0 or an overflow rule applies. Ratios are not changed by device pixel ratio: a 1920 by 1080 and a 3840 by 2160 screen share 16:9 while differing four times in pixels.
Limits
The tool computes numbers and CSS; it does not crop or resize files. It assumes square pixels. The closest common ratio is chosen from the twelve in the table only.
Related tools
- Object Fit Tester shows how an image fills a box of that ratio.
- Placeholder Image Generator creates an image in the resulting size.
- Golden Ratio Calculator divides lengths in 1:1.618.
- Image Resizer changes the actual pixel size of a picture.
Checked against the current version of the Aspect Ratio & Screen Dimension Calculator on .