Aspect Ratio & Image Calculator
Compute matching dimensions and pixel sizes for any aspect ratio, scaled to your target width or height.
Interactive Client Prototype Sandbox
Disclaimer: This free tool is provided “as is,” without warranties of any kind, and is for general informational purposes only — not professional, legal, financial, medical, tax, or engineering advice. Results may contain errors; verify anything important independently and use at your own risk. We accept no liability for any loss or damage arising from its use. See our Terms of Use for details.
Step-by-Step Guide
Select a preset ratio from the dropdown (16:9, 4:3, 1:1, 9:16, 21:9, 3:2, and others) or type a custom ratio in the W:H fields. Enter either the width or the height in the pixel fields; the other dimension calculates automatically. The scaled preview below shows the actual proportional shape.
The tool also reduces any ratio you type to its simplest form using the greatest common divisor. For example, entering 1920:1080 shows it reduces to 16:9, confirming the aspect ratio class of a standard 1080p resolution.
16:9 ratio with width 1280: height = 1280 × (9/16) = 720. Preview shows a 16:9 rectangle. 4:3 with height 600: width = 600 × (4/3) = 800. Custom ratio 2560:1080 reduces to 64:27 (an ultrawide 21:9-class ratio). 1:1 with width 1000: height = 1000 (a perfect square).
Who it's for
Graphic artists, UI/UX designers, video editors, web developers, and social media managers.
Core Features
- Fills in the missing width or height as you type the other.
- Common presets (16:9, 4:3, 1:1, 9:16) with a live visual preview.
- Reduces to the simplest ratio using the greatest common divisor.
- Scaled preview that maps the real proportions.
🛡️ No tracking — your inputs, keys, and details never leave this client sandbox.
What is an aspect ratio?
An aspect ratio is the proportional relationship between the width and height of a rectangle, expressed as two numbers separated by a colon. A 16:9 rectangle is 16 units wide for every 9 units tall. The actual dimensions can be anything that maintains this ratio: 1280×720, 1920×1080, 3840×2160 are all 16:9. Aspect ratios define the shape of a canvas independently of its size.
What are the standard aspect ratios and where are they used?
16:9 (widescreen) is the standard for HDTV, YouTube, most monitors, and smartphone landscape video. 4:3 (fullscreen) was the standard for older TVs and monitors and is still used for some presentation formats. 1:1 (square) is used for Instagram posts, profile pictures, and album art. 9:16 (portrait) is the standard for TikTok, Instagram Reels, and smartphone portrait video. 21:9 (ultrawide) is used for cinema and ultrawide monitors. 3:2 is common in DSLR camera sensors and older smartphone cameras.
How do I calculate height from width and aspect ratio?
Given width W and ratio R:S (width:height), height H = W × (S/R). For 16:9 at width 1920: H = 1920 × (9/16) = 1080. Given height and ratio, width = H × (R/S). These are simple divisions that the calculator handles automatically — enter one dimension and it fills the other.
Why does reducing 1920:1080 give 16:9?
Reducing a ratio to its lowest terms uses the greatest common divisor (GCD). GCD(1920, 1080) = 120. Dividing both by 120: 1920/120 = 16, 1080/120 = 9. So 1920:1080 and 16:9 are the same ratio expressed differently — any dimensions proportional to 16:9 will reduce to 16:9.
Aspect ratio as a design constraint vs. an aesthetic choice
Designers encounter aspect ratio in two completely different contexts, and conflating them causes problems. The first context is a technical constraint: YouTube requires 16:9 thumbnails, Instagram Reels require 9:16, OpenGraph social cards require 1.91:1. Deliver the wrong ratio and the platform either crops automatically (losing important content) or letterboxes with black bars (looking unprofessional). The second context is an aesthetic choice: when designing a hero image, product card, or video embed, the ratio is yours to choose, and it affects how the finished piece reads visually — square (1:1) feels stable and archival, widescreen (16:9) feels cinematic and modern, tall portrait (4:5) feels editorial and magazine-like. Understanding which context you are in before picking dimensions saves significant rework.
The mathematics of ratios
A ratio W:H expresses the relationship width/height as a fraction in lowest terms. Two rectangles with the same aspect ratio are geometrically similar — one is a scaled version of the other. To check whether two resolutions have the same aspect ratio, reduce both to lowest terms by dividing by their GCD. 2560×1440 and 1280×720 both reduce to 16:9 (GCD is 160 and 80 respectively). 1024×768 and 800×600 both reduce to 4:3. This property is useful when resizing images or video to fit a container: maintain the ratio to avoid distortion.
Historical evolution of display ratios
Early television used 4:3, matching the approximate ratio of 35mm film frames. Widescreen cinema adopted wider formats in the 1950s to differentiate from TV, settling on 2.39:1 (often called 2.40:1 or 'Scope') and 1.85:1. HDTV standardized on 16:9 (1.78:1) as a compromise between 4:3 TV and cinema widescreen. Smartphone screens have grown progressively taller, with 9:16, 9:19.5, and 9:20 ratios common on recent phones to accommodate the gesture bar and notification area. Ultrawide monitors at 21:9 (actually 21.33:9 or 64:27 at 2560:1080 resolution) target gaming and productivity users who want a wide panoramic field of view.
Design implications of aspect ratio
For web and app design, aspect ratio is used to create responsive containers that maintain their shape at any screen width. CSS provides the aspect-ratio property (aspect-ratio: 16 / 9) that keeps an element proportional regardless of its computed width. For video thumbnails and Open Graph images, platforms enforce specific required ratios — YouTube thumbnails must be 16:9, Twitter link cards are 1.91:1, Instagram feed posts support 1:1, 4:5, and 1.91:1. Cropping to the wrong ratio results in automatic crops or black bars on the platform's side.