How to use
- Find the ratio: enter a width and height to get the simplified aspect ratio (e.g. 16:9), the decimal ratio (e.g. 1.78:1), the closest common ratio and the greatest common divisor.
- Find the size: enter a ratio and the one side you know (width or height) to get the other side. Any unit works — px, cm or anything else — and the result uses the same unit.
- Common ratio buttons: press a button such as 16:9, 4:3 or 21:9. In “Find the ratio” it fills in an example resolution; in “Find the size” it fills in the ratio.
- Below the result you get a table of common resolutions and a CSS
aspect-ratiovalue you can copy. The ratio preview appears above the inputs on mobile and on the right on desktop.
How the ratio is calculated: greatest common divisor
An aspect ratio is the width and height divided by their greatest common divisor (GCD). The GCD comes from the Euclidean algorithm: divide the larger number by the smaller one, take the remainder, and repeat until the remainder is 0. The last divisor is the GCD.
For 1920 and 1080: 1920 ÷ 1080 leaves 840, 1080 ÷ 840 leaves 240, 840 ÷ 240 leaves 120, and 240 ÷ 120 leaves 0, so the GCD is 120. 1920 ÷ 120 = 16 and 1080 ÷ 120 = 9, which gives 16:9.
If a value has decimals, like 297 × 210.5, both numbers are multiplied by a power of 10 to make them whole before simplifying. When a ratio still has large numbers after simplifying, the tool also shows the closest common ratio and how far off it is.
Calculating a size, and results that aren’t whole numbers
The other side comes from a simple proportion. At 16:9 with a width of 1280, the height is 1280 × 9 ÷ 16 = 720.
If the size must be a whole number, as with pixels, the result can still have decimals. For a simplified ratio of 16:9 and a whole-number width, the height is a whole number only when the width is a multiple of 16. The tool shows the rounded result and, if it is not a whole number, the value before rounding. When the entered length is a whole number, it also suggests nearby whole-number sizes that preserve the ratio. For example, a width of 1000 gives a height of 562.5, with nearby sizes of 992 × 558 and 1008 × 567. For units such as cm, use the value before rounding.
Common ratios for video, photos and social media
- 16:9: the standard landscape screen for TVs, monitors and online video. 1920 × 1080 in the HDTV standard (ITU-R BT.709) and 3840 × 2160 in the UHDTV standard (ITU-R BT.2020) are both 16:9.
- 9:16: 16:9 turned upright, commonly used for vertical video. Depending on the phone screen ratio, the video may have borders or be cropped.
- 4:3 and 3:4: 4:3 is the ratio of older TVs and monitors and is also common for photos. 3:4 is its portrait counterpart.
- 3:2 and 2:3: a common ratio for photos taken with cameras.
- 1:1: a square, used for images where width and height are equal, such as profile pictures and thumbnails.
- 4:5: a slightly tall photo ratio that takes up more vertical space than 1:1.
- 16:10: used on laptops and monitors, a little taller than 16:9.
- 21:9 and 32:9: very wide screens, such as ultrawide monitors.
Recommended sizes on social media and video platforms differ from service to service and change often, so check each service’s official help pages before you upload.
Using it in CSS aspect-ratio
When you set a ratio in the CSS aspect-ratio property and set an element’s width, its height is calculated from the ratio if it is automatic (height: auto). If both width and height are fixed, this property does not adjust the dimensions. Write the value as width / height, like aspect-ratio: 16 / 9;, or as a single number (aspect-ratio: 1.5;). This tool gives you the value as two simplified whole numbers, so you can copy it as is. Reserving space for a video area or thumbnail can reduce layout shifts when an image loads late.