Calculate the missing value for an aspect ratio
An aspect ratio is the proportional relationship between the width and height of an image, video, or screen. It is expressed as two numbers separated by a colon (e.g., 16:9), ensuring content scales without distortion.
Your aspect ratio is:
16:9
Let's say you've got a gorgeous photo that's 1600 × 1200 pixels, but uh oh, your blog can only fit 400 pixels wide. What now? Time for some aspect ratio wizardry! ✨
(original height / original width) × new width = new height
(1200 / 1600) × 400 = 300Boom! Your resized photo is 400 × 300 pixels and looks perfect. No squishing, just pure proportional beauty.
aspect-ratio: 1920 / 1080;| Ratio | Pixels | Use Case |
|---|---|---|
| 1:1 | 1080 × 1080 | Instagram, profile pictures |
| 4:3 | 1024 × 768 | Standard TV, presentations |
| 3:2 | 1500 × 1000 | DSLR photos, print |
| 16:9 | 1920 × 1080 | YouTube, widescreen monitors |
| 4:5 | 1080 × 1350 | Instagram portrait posts |
| 9:16 | 1080 × 1920 | Stories, Reels, TikTok |
| 21:9 | 2560 × 1080 | Ultrawide, cinematic |
| 2.39:1 | 2390 × 1000 | Anamorphic cinema |
Formula
Ratio = W ÷ GCD(W, H) : H ÷ GCD(W, H) | Scale: W₂ = W₁ × (H₂ ÷ H₁)W, H = Original width and height in pixels
GCD = Greatest Common Divisor — the largest integer that divides both W and H evenly
W₂ / H₂ = Target width or height after proportional scaling
Worked Example
Find the aspect ratio of 1920 × 1080 and scale to 800px wide
Did you know? The 16:9 aspect ratio was chosen as the HDTV standard in the 1980s because it is the geometric mean of 4:3 and 2.39:1 (cinema) — making it the best single ratio for displaying both TV and film content.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.