How to Calculate Aspect Ratio for Images and Video
Aspect ratio is the proportional relationship between an image's width and height. Get it wrong and your images appear stretched, squished, or display with black bars. Get it right and your content looks perfect on every screen.
What Is Aspect Ratio?
Aspect ratio is written as W:H — width to height. A 16:9 image is 16 units wide for every 9 units tall. The specific pixel count doesn't matter, only the proportion does. A 1280×720 px image has the same 16:9 aspect ratio as a 1920×1080 px image.
Reducing an aspect ratio to its simplest form uses the Greatest Common Divisor (GCD): 1920×1080 → GCD is 120 → 16:9.
How to Calculate Missing Dimensions
The most common use case: you have an image at 1200×800 px and need to scale it to 600 px wide. What's the correct height?
New height = (New width ÷ Original width) × Original height
= (600 ÷ 1200) × 800
= 0.5 × 800
= 400 px Or the other way — you know the height and need the width:
New width = (New height ÷ Original height) × Original width
= (300 ÷ 800) × 1200
= 0.375 × 1200
= 450 px Use our Aspect Ratio Calculator to do this calculation instantly without math.
Standard Aspect Ratios and When to Use Them
16:9 — Widescreen
The universal standard for HD and 4K video. Used for YouTube, Vimeo, most TV and monitor screens, and presentations. Common resolutions: 1280×720, 1920×1080, 3840×2160.
1:1 — Square
Instagram posts, profile photos, thumbnail images. Easy to display on any screen. Common: 1080×1080 px.
4:3 — Classic
Standard definition TV, early digital cameras, iPad display. Useful for presentations and certain print formats. Common: 1024×768, 800×600.
9:16 — Vertical
Instagram Reels, TikTok, YouTube Shorts, Snapchat Stories. The phone-native format. Common: 1080×1920 px.
3:2 — DSLR
The native ratio of most DSLR and mirrorless cameras. Prints well at 4×6, 6×9 inches. Common: 6000×4000, 4000×2667.
21:9 — Ultrawide
Cinema format and ultrawide monitors. Used in film production and premium monitors. Common: 2560×1080, 3440×1440.
Why Aspect Ratio Matters for Web
In CSS, images default to their intrinsic dimensions. If you set only a width, the browser uses the original aspect ratio for height — but only if the image has loaded. Before it loads, height is 0, causing layout shifts (Cumulative Layout Shift, a Core Web Vitals metric).
Fix this by adding the width and height attributes to your <img> tags — browsers use these to reserve space before the image loads:
<img src="hero.jpg" width="1200" height="675" alt="Hero image">
With CSS aspect-ratio property, you can also set a fixed ratio: aspect-ratio: 16 / 9;
Calculate proportional dimensions — free