Scale dimensions without distortion: enter an original width and height plus a new width or height to get the matching side, the simplified ratio, and CSS.
Free toolNo signupFormula shown
Saved & recent
CHECK ENTRYSAVED
RESULT
—
FORMULA USEDAspect Ratio Calculator
What an aspect ratio is
An aspect ratio is width divided by height, written with a colon: 16:9 means the width is 16 units for every 9 of height. Two rectangles share a ratio when one is a clean scale of the other, which is exactly what resizing without distortion means.
Scaling one side from the other
When you fix a new width, the height that preserves the ratio is newWidth × originalHeight ÷ originalWidth; fixing a height flips the cross-multiplication. The GCD method reduces 1920×1080 to 16:9 by dividing both numbers by their greatest common divisor (120). The nearest common ratio row matches your decimal ratio against 21:9, 16:9, 3:2, 4:3, 5:4, and 1:1.
Where each ratio lives
16:9 dominates monitors, televisions, and online video; 4:3 is classic TV and tablet photography; 3:2 is the still-photography standard from 35 mm film; 21:9 ultrawide is cinema-flavored desktop space; 1:1 is square social content. Knowing the nearest common ratio tells you how your image will crop on each surface.
Worked example
A 1920 × 1080 video needs to shrink to 1280 pixels wide.
GCD(1920, 1080) = 120, so the simplified ratio is 16:9.
CSS snippet: aspect-ratio: 16 / 9;
How to use it
Enter the original width and height of your image or video.
Choose whether the new width or the new height is the fixed one.
Type the known new size; the matching side appears instantly.
Copy the simplified ratio or the CSS snippet for your layout.
Frequently asked questions
How do I calculate a missing dimension from an aspect ratio?
Cross-multiply: newWidth = newHeight × originalWidth ÷ originalHeight, and vice versa. For 16:9 content at 720 pixels high, the width is 720 × 16 ÷ 9 = 1280.
How do I simplify an aspect ratio?
Divide both numbers by their greatest common divisor. 1920 and 1080 share a GCD of 120, leaving 16:9. A calculator keeps this instant even for awkward sizes like 2560×1440 (also 16:9).
What is the difference between 16:9 and 4:3?
At the same height, 16:9 is about 33% wider — more cinematic, less vertical space. 4:3 fits more document or legacy-video content per screen inch. Converting between them requires cropping or letterboxing, since no clean scale maps one to the other.
Does the CSS aspect-ratio property work on all elements?
It works on any element with an intrinsic or specified size in all modern browsers, including replaced elements like images and iframes. Very old browsers need the padding-top fallback technique.
When should I use aspect-ratio versus padding-top hacks?
Use aspect-ratio — it is readable, keeps content in normal flow, and needs no absolute-positioning wrapper. The padding-top percentage trick only remains useful for legacy browser support.