What is Aspect Ratio?
Aspect ratio is the proportional relationship between the width and height of an image, screen, or video. It's expressed as two numbers separated by a colon (e.g., 16:9), where the first number represents the width and the second represents the height.
How to Calculate Aspect Ratio
To find the aspect ratio, divide both the width and height by their greatest common divisor (GCD). For example, a 1920×1080 image has a GCD of 120, so 1920÷120 = 16 and 1080÷120 = 9, giving us the ratio 16:9.
Common Aspect Ratios
- 16:9 - Standard widescreen format for HD video, TV, and monitors
- 4:3 - Classic TV and computer monitor format
- 1:1 - Square format, popular for social media posts
- 21:9 - Ultrawide cinematic format
- 9:16 - Vertical video for mobile devices (Stories, TikTok)
- 3:2 - Standard 35mm film and DSLR photo format
Why Aspect Ratio Matters
Maintaining the correct aspect ratio ensures images and videos display properly without stretching or distortion. When resizing content, always scale proportionally to preserve the original aspect ratio. This is crucial for:
- Video editing and production
- Web design and responsive images
- Print design and photography
- Social media content creation
- Screen and display manufacturing
Common Resolutions by Aspect Ratio
Two screens can share a ratio while packing very different pixel counts. A 1280×720 display and a 3840×2160 display are both 16:9, so an image cropped for one fits the other without any letterboxing. The table below groups popular resolutions by their ratio, along with the decimal value the calculator reports next to the simplified form.
| Ratio | Decimal | Typical use | Example resolutions |
|---|---|---|---|
| 16:9 | 1.778 | HD video, TVs, monitors, YouTube | 1280×720, 1920×1080, 2560×1440, 3840×2160, 7680×4320 |
| 4:3 | 1.333 | Older monitors, iPad, slide decks | 640×480, 1024×768, 1600×1200 |
| 64:27 (marketed as 21:9) | 2.370 | Ultrawide monitors, cinematic games | 2560×1080 |
| 3:2 | 1.500 | DSLR photos, MacBook displays | 3000×2000, 2560×1664 (MacBook Air) |
| 9:16 | 0.563 | Vertical video, phone screens | 1080×1920 |
Worked Example: Resizing a Photo for the Web
Say you shot a 4032×3024 photo on an iPhone and need a 1200px wide version for a blog post. First find the decimal ratio: 4032 ÷ 3024 = 1.333, which simplifies to 4:3. To keep that ratio, divide the new width by the decimal: 1200 ÷ 1.333 = 900. Export at 1200×900 and the proportions stay identical, so nothing stretches. Working the other direction, if you fixed the height at 900 instead, you would multiply 900 × 1.333 to get back 1200. That is exactly what the New Dimensions fields do when you type into only one box.
Social Media Dimensions Cheat Sheet
| Placement | Pixel size | Ratio |
|---|---|---|
| YouTube thumbnail | 1280×720 | 16:9 |
| Instagram feed (portrait) | 1080×1350 | 4:5 |
| Stories / Reels / TikTok | 1080×1920 | 9:16 |
| X (Twitter) header | 1500×500 | 3:1 |
| LinkedIn banner | 1584×396 | 4:1 |
Letterbox, Pillarbox, or Crop?
When the source ratio does not match the destination, something has to give. Play 4:3 footage on a 16:9 TV and you get pillarboxing, those vertical black bars on the left and right that fill the extra width. Show a 2.39:1 scope film on a 16:9 screen and you get letterboxing, the horizontal bars above and below. The preview in this tool maps those choices directly: Contain shrinks the whole image so nothing is lost and adds the bars, Cover fills the frame and trims the overflowing edges, and Fill ignores the ratio and stretches the image to fit, which is the one option that distorts.
Cinema and Phone Ratios
Theatrical film uses two widescreen standards: 1.85:1, often called flat, and 2.39:1, the anamorphic scope format squeezed onto film and unsqueezed during projection. Phones went the other way. For years handsets were 16:9, then makers stretched them taller to 19.5:9 and 20:9 so a longer screen could fit in the same hand width, leaving more room for text and taller video without a wider body.
A Note for Web Developers
In modern CSS you can lock an element's shape with the aspect-ratio: 16 / 9 property and let the width flex. Before it shipped widely, the trick was a wrapper with padding-top: 56.25%, since 9 ÷ 16 = 0.5625, which reserved 16:9 space for an absolutely positioned iframe or video. The percentage is just the height divided by the width, so a 4:3 embed uses 75% instead.