Common ratios
Original dimensions
Scale (preserve ratio)
Enter a new width OR a new height — the other is calculated automatically.
About Aspect Ratio Calculator
An aspect ratio calculator computes the proportional relationship between width and height — expressed as a ratio like 16:9 or 4:3 — and lets you scale dimensions to any target size while preserving the ratio. The tool simplifies arbitrary dimensions to their lowest terms via GCD (greatest common divisor) and surfaces common ratios used in video production, photography, social media, and web design.
Why use a Aspect Ratio Calculator?
Preserving aspect ratio is critical for video (YouTube 16:9, TikTok 9:16, Instagram Reels 9:16, cinema 2.39:1 anamorphic), photography (DSLR 3:2, micro four-thirds 4:3, medium format 6:7), social media (1:1 square posts, 4:5 portrait, 9:16 stories), and responsive web design. Wrong ratios produce black bars (letterboxing/pillarboxing), cropped content, or stretched/squished imagery. This tool eliminates manual GCD math and the common ratio reference is one click away.
Who is it for?
Front-end developers building responsive layouts with CSS aspect-ratio property, video editors transcoding between platform formats, photographers preparing images for print and web, social media managers sizing content for multiple platforms, and designers creating mockups at specific dimensions.
How to use the tool
Enter your original width and height (any units — px, em, mm, the ratio is unit-agnostic)
View the simplified aspect ratio (e.g., 1920×1080 → 16:9) computed via GCD
Optionally pick a common ratio (16:9, 4:3, 1:1, 9:16, etc.) from the preset list
To scale: enter a new width and the tool calculates the matching height (or vice versa)
Copy the result as ratio, dimensions, or CSS aspect-ratio property
Frequently Asked Questions
How do I calculate aspect ratio from width and height?
Enter the original width and height. The tool divides both by their GCD (greatest common divisor) to express the ratio in lowest terms. Example: 1920×1080 → GCD(1920, 1080) = 120 → 16:9. 2560×1440 → GCD = 160 → 16:9 (same ratio, different resolution). For non-clean ratios like 1366×768 → 683:384 (a Euclidean's reduction); these often correspond to imprecise hardware standards rather than design intent. Pure math, runs entirely in your browser — zero HTTP requests.
What are the most common aspect ratios?
Video. **16:9** = HD/4K standard (1920×1080, 3840×2160), YouTube, modern displays. **9:16** = vertical for TikTok, Instagram Reels, YouTube Shorts. **21:9** = ultrawide cinematic (3440×1440). **2.39:1** = anamorphic cinema. **4:3** = legacy SD TV, photography. Photo. **3:2** = DSLR, 35mm film. **1:1** = Instagram square. **4:5** = Instagram portrait. **5:4** = older monitors, medium format. Print. **8.5:11** = US Letter. **A4** ≈ 1:√2 = 1.414. Social media managers should keep this list handy — wrong ratio = automatic cropping on the platform.
Is my data sent to a server?
No — calculation runs entirely in your browser via JavaScript arithmetic (Euclidean GCD algorithm + division). Your dimensions never reach a server, never get logged. Verify in DevTools' Network tab: zero HTTP requests during calculation. Safe for proprietary dimensions (unreleased product packaging, confidential design specs).
How do I scale dimensions while preserving the ratio?
Pick one dimension as the 'fixed' size. If you want a new width and need the matching height: `new_height = new_width × (original_height / original_width)`. Example: a 1920×1080 image scaled to 1280 wide → 1280 × (1080/1920) = 720. The tool does this automatically when you enter a new width or height. For CSS, modern browsers support the `aspect-ratio` property: `aspect-ratio: 16 / 9` keeps an element at 16:9 regardless of content (containers + media).
What's letterboxing vs pillarboxing?
Mismatched display vs content aspect ratios. **Letterboxing**: black bars at TOP and BOTTOM. Happens when content is wider than the display (e.g., 21:9 cinema on a 16:9 TV). **Pillarboxing**: black bars on LEFT and RIGHT. Happens when content is narrower than the display (e.g., 4:3 SD content on a 16:9 TV, or 9:16 vertical video on a horizontal display). Both preserve the original aspect ratio but waste display area. Alternative is cropping (lose content) or stretching (distort content). For platform-fit content (TikTok, Instagram Reels), shoot at the target ratio directly.
What's the CSS aspect-ratio property?
Modern CSS feature (supported in all browsers since 2021) that locks an element to a specific aspect ratio regardless of content. Syntax: `aspect-ratio: 16 / 9;` or `aspect-ratio: 1.7777;` (decimal). Useful for: responsive video embeds (no more padding-hack), image placeholders (reserve space before image loads — eliminates layout shift), card components (consistent dimensions). Replaces the old 'padding-bottom: 56.25%' hack for 16:9 embeds. Combined with `object-fit: cover` on images, gives clean cropping. Modern best practice.
Why is 16:9 standard for video?
16:9 (= 1.7778) was selected in 1980 as a compromise between cinema's various widescreen ratios (1.85:1, 2.35:1) and the old 4:3 (1.333) TV standard. It's the geometric mean of 4:3 and 2.35:1 — fits more cinema content with minimal cropping while remaining close enough to 4:3 to be a sensible upgrade. Adopted as the HDTV standard (1080p, 4K, 8K all use 16:9) and now the default for virtually all displays and video platforms. For modern content, default to 16:9 unless your platform specifically wants portrait (9:16) or square (1:1).
How precise is the simplification?
Exact for integer dimensions — GCD-based reduction is mathematically precise. Edge cases: (1) **Non-integer dimensions**: the tool may treat 1920.5×1080 as ratios with a denominator other than 1 (most use cases want integer pixels — round first). (2) **Float input**: 1.7778 → approximated as 16:9 (or 8889:5000 if treated as exact). (3) **Real-world hardware**: some 'widescreen' devices use slightly off ratios for technical reasons (1366×768 ≈ 16:9 but not exactly — actual 683:384). For design intent, simplify to the nearest common ratio. For engineering precision, use the exact ratio.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.