Aspect Ratios Explained — From Cinema to Social Media
Understand aspect ratios for video, photography, and web design. Learn common ratios like 16:9, 4:3, and 1:1, and how to calculate and convert between them.
Introduction
An aspect ratio is the proportional relationship between width and height. It's written as two numbers separated by a colon — 16:9, 4:3, 1:1. These numbers tell you the shape of the frame, not the size. A 16:9 image could be 1920×1080, 3840×2160, or 320×180 — all have the same aspect ratio.
Understanding aspect ratios matters for anyone working with images, video, or web design. Choose wrong and your content gets cropped, letterboxed, or stretched.
Common Aspect Ratios
16:9 — The Default
The dominant ratio of modern screens. TVs, monitors, laptops, and YouTube all default to 16:9. Standard resolutions:
- 1280×720 (720p HD)
- 1920×1080 (1080p Full HD)
- 2560×1440 (1440p QHD)
- 3840×2160 (4K UHD)
If you're creating video content for YouTube, Vimeo, or most streaming platforms, 16:9 is the safe default.
4:3 — The Classic
The standard TV and monitor ratio before widescreen took over. Still used in:
- iPad screens
- Many projectors
- Older TV content
- Some photography (especially medium format)
Standard resolutions: 1024×768, 1600×1200, 2048×1536.
1:1 — The Square
Instagram popularized the square format. Used for:
- Instagram feed posts (though they now support other ratios)
- Profile pictures across platforms
- Album artwork
- Some display ads
9:16 — Vertical Video
16:9 rotated. The native format for:
- TikTok
- Instagram Reels and Stories
- YouTube Shorts
- Snapchat
Standard resolution: 1080×1920.
21:9 — Ultrawide
Cinema and ultrawide monitors. More precisely 2.39:1 for cinema (often called 2.40:1). Ultrawide monitors are typically 3440×1440 or 5120×2160.
3:2 — Photography
Used by most DSLR and mirrorless cameras. The 35mm film frame (36×24mm) is exactly 3:2. Common resolutions: 6000×4000, 4500×3000.
Also the ratio of Microsoft Surface devices.
Social Media Aspect Ratios Cheat Sheet
| Platform | Format | Ratio | Recommended Size |
|---|---|---|---|
| YouTube | Video | 16:9 | 1920×1080 |
| YouTube | Thumbnail | 16:9 | 1280×720 |
| YouTube Shorts | Video | 9:16 | 1080×1920 |
| Feed (square) | 1:1 | 1080×1080 | |
| Feed (portrait) | 4:5 | 1080×1350 | |
| Stories/Reels | 9:16 | 1080×1920 | |
| TikTok | Video | 9:16 | 1080×1920 |
| Twitter/X | In-stream image | 16:9 | 1200×675 |
| Feed image | 1.91:1 | 1200×628 | |
| Feed image | 1.91:1 | 1200×627 | |
| Pin | 2:3 | 1000×1500 |
Use the aspect ratio calculator to find the exact pixel dimensions when you know the ratio and one dimension.
How to Calculate Aspect Ratios
To find the aspect ratio of any image, divide both dimensions by their greatest common divisor (GCD).
Example: 1920×1080
- GCD of 1920 and 1080 = 120
- 1920 ÷ 120 = 16
- 1080 ÷ 120 = 9
- Aspect ratio: 16:9
Example: 2560×1440
- GCD of 2560 and 1440 = 160
- 2560 ÷ 160 = 16
- 1440 ÷ 160 = 9
- Still 16:9
Example: 1080×1350
- GCD of 1080 and 1350 = 270
- 1080 ÷ 270 = 4
- 1350 ÷ 270 = 5
- Aspect ratio: 4:5
Scaling While Preserving Ratio
When you need a specific width, calculate the height:
$$height = width \times \frac{ratio_{height}}{ratio_{width}}$$
For a 16:9 image at 800px wide: $800 \times \frac{9}{16} = 450$. So: 800×450.
For a 4:3 image at 800px wide: $800 \times \frac{3}{4} = 600$. So: 800×600.
When you need a specific height, calculate the width:
$$width = height \times \frac{ratio_{width}}{ratio_{height}}$$
The aspect ratio calculator handles these calculations in both directions.
What Happens When Ratios Don't Match
When your content ratio doesn't match the display ratio, something has to give:
Letterboxing
Black bars added to the top and bottom (or sides) to preserve the original ratio. A 21:9 movie on a 16:9 screen shows horizontal black bars. A 4:3 video on a 16:9 screen shows vertical bars ("pillarboxing").
Cropping
Cutting off part of the image to fill the target ratio. This loses content. A 16:9 photo cropped to 1:1 loses 44% of its width. Always preview crops before committing.
Stretching
Distorting the image to fill the frame. This is almost always wrong — people and objects look unnaturally wide or tall. Avoid this.
Pan and Scan
A legacy TV technique where a 2.39:1 movie is cropped to 4:3 by choosing which portion of each frame to show. Rarely used today but explains why old DVDs sometimes had "full screen" and "widescreen" versions.
DPI, PPI, and Physical Size
Aspect ratio tells you the shape. Resolution tells you the total pixels. But how large will it print or display physically? That depends on DPI (dots per inch) or PPI (pixels per inch).
$$physical_width = \frac{pixel_width}{PPI}$$
A 3000×2000 image at 300 PPI prints at 10×6.67 inches. At 72 PPI (web standard), it would display at 41.7×27.8 inches on screen — which is why web images look huge when printed at their native PPI.
Check the screen DPI calculator to find the PPI of any display given its resolution and physical size.
Responsive Web Design and Ratios
In CSS, you can enforce aspect ratios with the aspect-ratio property:
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.square-thumbnail {
width: 200px;
aspect-ratio: 1 / 1;
}
The older "padding-top hack" used percentage padding to enforce ratios before aspect-ratio was supported:
/* 16:9 ratio via padding */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* (9/16) × 100 */
}
The aspect-ratio CSS property is now supported in all modern browsers and is the preferred approach.
Conclusion
Choose 16:9 for video and web content, 9:16 for vertical/mobile content, 1:1 for square social posts, and 3:2 for photography. When in doubt, check the platform's requirements.
The aspect ratio calculator handles the math for converting between ratios and calculating exact pixel dimensions. Use the screen DPI calculator when you need to know physical display sizes.