Aspect Ratio Calculator: Find a Ratio or Resize to Fit

Type in any width and height to get the simplified aspect ratio, the nearest standard ratio and the CSS to lock it in. Then enter a new width or height to resize without stretching. A ratio is just width divided by height, so scaling both sides by the same factor never distorts the image.

How the aspect ratio is worked out

The calculator divides width and height by their greatest common divisor, the largest whole number that goes into both. 1920 and 1080 share a divisor of 120, so 1920 × 1080 becomes 16:9. Decimal inputs are scaled up to whole numbers first, so 1.5 × 1 gives 3:2.

Some real screen sizes do not reduce neatly. 1366 × 768 simplifies to 683:384, which is why the result also shows the decimal ratio (about 1.78:1) and the nearest standard ratio with how far off it is. Ultrawide monitors are a similar case: 2560 × 1080 is sold as "21:9" but is exactly 64:27, about 1.6% wider.

Resizing without distortion

To keep the shape, multiply the original height by new width ÷ original width (or the reverse if you know the height). Shrinking 1920 × 1080 to 800 wide gives 800 × 1080 ÷ 1920 = 450. When the answer is not a whole number of pixels, the result shows the exact value and the nearest pixel; rounding changes the ratio by a fraction of a pixel, which nobody will see.

Locking a ratio in CSS

Modern browsers support the aspect-ratio property, so a video or image placeholder can reserve the right space before it loads and avoid layout shift. The older padding trick (padding-top as a percentage of width, equal to height ÷ width × 100) still works for legacy code, and the calculator gives you both. If you are setting up responsive type next to this, the px to rem converter and type scale calculator use the same base-size thinking.