Aspect Ratio Explained: How to Calculate Any Ratio (With Chart)
Quick answer: An aspect ratio is the proportional relationship between width and height, written as W:H. A 16:9 ratio means for every 16 units wide, the image is 9 units tall. To calculate any aspect ratio, divide both the width and height by their greatest common divisor (GCD). A 1920x1080 image: GCD is 120, so 1920/120 : 1080/120 = 16:9.
I wasted an entire afternoon once resizing a client's hero video for their website. The source was 4:3, the container expected 16:9, and I kept eyeballing the crop until the subjects looked stretched. If I'd spent 30 seconds understanding aspect ratios, I would've known the math was working against me and cropped from center instead.
Aspect ratios aren't complicated. They're just fractions. But picking the wrong one means black bars on your video, squished images on social media, or a layout that breaks on mobile. Here's everything you need to know to pick the right ratio every time.
What Is an Aspect Ratio?
An aspect ratio describes the shape of a rectangle as a relationship between its width and height. It's written as two numbers separated by a colon: width:height.
A 16:9 ratio doesn't mean the image is 16 pixels wide and 9 pixels tall. It means that for every 16 horizontal units, there are 9 vertical units. The actual resolution can be anything that maintains that proportion: 1920x1080, 1280x720, 3840x2160 --- all 16:9.
The formula to calculate an aspect ratio from pixel dimensions:
Aspect Ratio = Width / GCD(Width, Height) : Height / GCD(Width, Height)GCD is the greatest common divisor --- the largest number that divides both values evenly. For 1920x1080, the GCD is 120. So: 1920/120 : 1080/120 = 16:9.
You don't need to calculate GCDs by hand. The aspect ratio calculator handles any dimensions instantly.
Here's an example that trips people up: 1920x1200. The GCD is 240. So: 1920/240 : 1200/240 = 8:5 (sometimes written as 16:10). Not 16:9 --- that extra 120 pixels of height changes the ratio. Getting this wrong means your carefully designed layout has misaligned images or unexpected scroll behavior.
Common Aspect Ratios and Their Use Cases
Here are the ratios you'll actually encounter in practice:
| Aspect Ratio | Decimal | Common Resolutions | Primary Use Cases |
|---|---|---|---|
| 1:1 | 1.0 | 1080x1080, 720x720 | Instagram posts, profile pictures, album covers |
| 4:3 | 1.33 | 1024x768, 1600x1200 | iPad screens, classic TV, PowerPoint slides |
| 3:2 | 1.5 | 1440x960, 6000x4000 | DSLR photos, MacBook displays, 35mm film |
| 16:10 | 1.6 | 1920x1200, 2560x1600 | MacBook Pro screens, some monitors, WXGA projectors |
| 16:9 | 1.78 | 1920x1080, 3840x2160 | YouTube, TV, most monitors, presentations |
| 9:16 | 0.56 | 1080x1920, 720x1280 | TikTok, Instagram Reels, YouTube Shorts, Stories |
| 21:9 | 2.33 | 2560x1080, 3440x1440 | Ultrawide monitors, cinematic video |
| 2.39:1 | 2.39 | 2048x858, 4096x1716 | Anamorphic cinema, Hollywood films |
| 4:5 | 0.8 | 1080x1350 | Instagram portrait posts (max vertical space in feed) |
| 2:3 | 0.67 | 1000x1500, 735x1102 | Pinterest pins, book covers, movie posters |
How to Calculate Aspect Ratio (Step by Step)
Three methods, from manual to instant:
Method 1: GCD calculation
- Take your dimensions (e.g., 2560x1440)
- Find the GCD. For 2560 and 1440: divide 2560 by 1440 = 1 remainder 1120. Divide 1440 by 1120 = 1 remainder 320. Divide 1120 by 320 = 3 remainder 160. Divide 320 by 160 = 2 remainder 0. GCD = 160.
- Divide both: 2560/160 : 1440/160 = 16:9
Method 2: Division shortcut
Divide width by height: 2560 / 1440 = 1.778. Look up 1.778 in the decimal column of the table above. It matches 16:9. This is faster but fails when the decimal doesn't match a common ratio exactly --- 1920x1200 gives 1.6, which you need to know is 16:10 (or 8:5).
Method 3: Use a calculator
Plug your dimensions into the aspect ratio calculator. It returns the simplified ratio, the decimal, and equivalent dimensions at common resolutions. No math required.
Aspect Ratios for Video
Video aspect ratios have standardized around a handful of formats. Using the wrong one means letterboxing (black bars on top/bottom) or pillarboxing (black bars on sides).
| Platform/Medium | Required Ratio | Resolution | Notes |
|---|---|---|---|
| YouTube (standard) | 16:9 | 1920x1080 or 3840x2160 | Default player ratio; other ratios get letterboxed |
| YouTube Shorts | 9:16 | 1080x1920 | Max 60 seconds, vertical only |
| TikTok | 9:16 | 1080x1920 | Safe zone is middle 80% due to UI overlays |
| Instagram Reels | 9:16 | 1080x1920 | Same as TikTok, same safe zone issue |
| Instagram Feed video | 1:1 or 4:5 | 1080x1080 or 1080x1350 | 4:5 gets more feed space |
| Twitter/X video | 16:9 or 1:1 | 1920x1080 or 1280x1280 | 16:9 recommended for engagement |
| Netflix/streaming | 16:9 | 3840x2160 | Master format; original films may use 2.39:1 |
| Cinema (standard) | 1.85:1 | 3996x2160 | "Flat" theatrical widescreen |
| Cinema (scope) | 2.39:1 | 4096x1716 | Anamorphic widescreen, epic feel |
| Ultrawide monitors | 21:9 | 3440x1440 | Gaming and productivity |
One gotcha with TikTok and Reels: the actual video canvas is 9:16, but the app overlays UI elements (username, description, buttons) over the bottom 15-20% of the frame. Place critical content in the center 80% of the vertical space, or your text will be hidden behind a like button.
Aspect Ratios for Photography and Print
Photographers deal with a mismatch that's existed since digital replaced film. DSLR sensors shoot 3:2 (inherited from 35mm film dimensions of 36x24mm), but most print sizes don't match 3:2 at all.
Here's the mismatch that ruins prints:
| Print Size | Actual Ratio | Closest Standard | Crop Amount |
|---|---|---|---|
| 4x6" | 3:2 | 3:2 | None |
| 5x7" | 7:5 (1.4) | Between 4:3 and 3:2 | ~8% from long edge |
| 8x10" | 5:4 (1.25) | Closer to 4:3 | ~17% from long edge |
| 11x14" | 14:11 (1.27) | Near 5:4 | ~15% from long edge |
| 16x20" | 5:4 (1.25) | Same as 8x10 | ~17% from long edge |
How to Resize Without Distortion
Resizing an image to a different aspect ratio without cropping means one of three things: you distort the image (stretching), you add padding (letterboxing), or you crop. There's no fourth option.
Scaling within the same ratio is lossless in terms of composition. 3840x2160 scaled to 1920x1080 is still 16:9 --- every pixel maps proportionally. Scale factors of 50%, 25%, or any clean fraction give the sharpest results. Odd scales like 73% can introduce aliasing.
Cropping to a different ratio removes content. To go from 16:9 to 1:1, you're cutting 43.75% of the width. Center crop is the default, but face-aware or subject-aware cropping (available in most editing tools and CSS via object-fit: cover with object-position) gives better results for photos with off-center subjects.
Padding (letterboxing) adds empty space. This preserves the full image but wastes screen space. YouTube does this automatically when you upload 4:3 content to a 16:9 player.
For programmatic resizing, CSS aspect-ratio is the modern solution:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}This property has 95%+ browser support in 2026 and replaces the old padding-bottom hack (padding-bottom: 56.25% for 16:9) that developers used for years. The aspect ratio calculator generates both the CSS property and the legacy padding-bottom percentage.
Aspect Ratio in Web Design
Responsive design complicates aspect ratios because the viewport width changes but the content ratio shouldn't. Three CSS approaches handle this:
CSS aspect-ratio property (modern, preferred):
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}Container query approach (for component-level ratio control):
.card-image {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
border-radius: 8px;
}
@container (min-width: 600px) {
.card-image {
aspect-ratio: 16 / 9;
}
}This switches from 4:3 (better for narrow cards) to 16:9 (better for wide cards) based on the container width. It prevents the awkward tall-and-narrow image problem that happens when 16:9 images are forced into narrow mobile card layouts.
For more on responsive units in CSS, check the CSS unit converter --- it handles the math for rem, em, and viewport units that interact with your aspect ratio containers.
FAQ
What's the difference between aspect ratio and resolution?
Aspect ratio is the shape (proportional relationship), resolution is the size (total pixels). 1920x1080 and 1280x720 have the same aspect ratio (16:9) but different resolutions. A higher resolution means more detail at the same shape. You can have identical ratios at vastly different quality levels --- a 16:9 video at 480p looks blurry, at 4K it looks sharp, but the compositional framing is identical because the shape hasn't changed.
Can I change aspect ratio without cropping?
Not without adding padding (letterboxing/pillarboxing) or distorting the image. These are the only three transformations: crop (remove content), pad (add empty space), or stretch (distort proportions). AI-powered tools like Photoshop's Generative Fill can "extend" an image to fill a new ratio by generating content, but the added areas are synthetic, not original. For most practical purposes, crop is the cleanest option.
Why does my video have black bars?
Black bars appear when the video's aspect ratio doesn't match the player's aspect ratio. A 4:3 video on a 16:9 screen gets vertical black bars on the sides (pillarboxing). A 21:9 video on a 16:9 screen gets horizontal black bars top and bottom (letterboxing). To eliminate them, either re-render the video at the target ratio or use CSS object-fit: cover to crop-to-fill in web players.
What aspect ratio should I use for social media?
It depends on the platform and placement. For Instagram feed posts, 4:5 gets maximum screen space. For Stories, Reels, TikTok, and YouTube Shorts, use 9:16. For YouTube standard videos, 16:9. For Twitter/X posts, 16:9 for video and 2:1 for link preview images. The social media image sizes guide has the complete reference with exact pixel dimensions for every platform.
Next Steps
- Calculate any ratio instantly with the aspect ratio calculator --- paste dimensions, get the simplified ratio plus CSS code.
- Get exact pixel sizes for every social platform in the social media image sizes 2026 reference.
- Set up proper meta tags for your images with the meta tag generator --- Open Graph image dimensions matter for social sharing previews.