An aspect ratio is the shape of an image or screen, written as width to height. Keeping it the same when you resize is what stops photos and videos from looking stretched or squashed.
How it works
The calculator finds the greatest common divisor of the width and height, the largest number that divides both exactly, and divides both by it. For 1920 × 1080 that number is 120, which gives 16:9.
To resize without distortion, multiply the new width by the original height, then divide by the original width.
Some sizes do not reduce to a familiar ratio. 1366 × 768, a common laptop screen, is 683:384, which is close to 16:9 but not exact.
A worked example
1920 × 1080 has a 16:9 aspect ratio, about 1.7778 as a decimal. Resized to 1280 pixels wide, it should be 720 pixels high to keep the same shape.
Questions people ask
What are the most common aspect ratios?
16:9 for most video and screens, 4:3 for older displays and many tablets, 1:1 for square social posts, 9:16 for vertical phone video, and 3:2 for many camera sensors.
How do I use this in CSS?
Copy the CSS aspect-ratio value, such as 16 / 9, into the aspect-ratio property. The browser then keeps the element in that shape as its width changes.
Why is the new height a decimal?
Some widths do not divide evenly into the ratio. Round to the nearest whole pixel, or pick a width that is a multiple of the ratio's first number, such as a multiple of 16 for 16:9.