Aspect Ratio Calculator
Calculate aspect ratios from dimensions, derive missing dimensions from a ratio + one side, and resize images proportionally. Includes 7 common-ratio presets, decimal output, and the modern CSS aspect-ratio property value.
Why Use Aspect Ratio Calculator?
Aspect ratio math is repetitive but error-prone — it's surprisingly easy to slip a divide and end up with a stretched or letterboxed image. This calculator removes the math while answering the practical questions you actually have: "is this a 16:9 image?" (From Dimensions), "what height for a 16:9 image at 1280 wide?" (From Ratio), and "how do I shrink a 4032×3024 photo to fit 800 wide?" (Resize). The CSS `aspect-ratio` output is the kicker — you can size container boxes that hold images or videos without computing padding-bottom hacks the old way.
How to Use Aspect Ratio Calculator
- Pick a mode using the tabs: From Dimensions (you have W and H, want the ratio), From Ratio (you have a ratio like 16:9 plus one side, want the other), or Resize (you have an original W/H plus a target side, want the matching dimension).
- Enter your values — every result updates live.
- Use the preset buttons for common ratios: 16:9, 4:3, 1:1, 21:9, 3:2, 9:16, 2:1.
- Copy the simplified ratio, the decimal value, or the CSS `aspect-ratio` property value with one click.
- Refer to the Common Aspect Ratios table for the right ratio per platform — Instagram, TikTok, YouTube, print, etc.
Worked Examples
Identify the ratio of a 4K image
Width 3840, Height 2160 (in the From Dimensions tab)
Aspect Ratio: 16:9 · Decimal: 1.7778 · CSS: 16 / 9
Both 4K UHD (3840×2160) and 1080p (1920×1080) resolve to 16:9 — confirms the ratio is correct before you crop or resize.
Find the right height for a 21:9 ultrawide hero image
Ratio 21:9, Known Width = 1920 (in the From Ratio tab)
Width 1920px · Height 822.86px (round to 823 for export)
Useful for designing cinematic site hero sections that shouldn't be letterboxed inside the viewport.
Resize a vertical phone shot for an Instagram Reel
Original 4032×3024, target Width = 1080 (in the Resize tab)
New dimensions: 1080 × 810px
Preserves aspect ratio while shrinking. For Reels (1080×1920), you'd need to crop too — this resize gives you the down-scaled source.
About Aspect Ratio Calculator
The Aspect Ratio Calculator handles every aspect-ratio question you'd ask while preparing media: "What ratio is my 1920×1080 image?", "If 16:9 video at 1280px wide, what's the height?", and "Resize 4032×3024 to fit 800px wide while staying proportional — what's the new height?" All three modes share preset buttons for the ratios you use weekly (Instagram square, TikTok vertical, ultrawide cinematic, etc.) and emit the modern CSS `aspect-ratio` property value so you can paste it directly into a stylesheet. The tool does GCD-based ratio simplification so 1920×1080 cleanly resolves to 16:9 instead of 1920:1080, and a tiny visual preview shows the resulting box at the calculated ratio. Everything runs in your browser; no images or data are uploaded.
Troubleshooting & Common Issues
Result height has decimals — what do I do?
Round to the nearest pixel. A 1.34px difference is invisible to viewers but means the value isn't expressible in a raster format. Most image editors round automatically when you paste the dimensions; just use the rounded number when typing into Photoshop, Figma, or your image processing pipeline.
I entered 1920×1080 but the simplified ratio says something other than 16:9
Check that both inputs are integers. If you enter `1920.5` accidentally, the GCD function rounds first and may produce a different ratio. Whole numbers in, whole numbers out.
My image looks stretched after resizing — but the calculator said it preserves ratio
Double-check that you're applying the new dimensions in your editor's "resize" (resample) operation, not its "canvas size" (pad/crop) operation. Canvas size keeps pixels at their original size and adds or removes empty area; resize actually rescales the pixel grid, which is what "preserve ratio" assumes.
What does the CSS aspect-ratio value look like in a stylesheet?
Use it like this: `.hero-image { aspect-ratio: 16 / 9; width: 100%; }`. The browser computes the height automatically. Modern browsers (Chrome 88+, Firefox 89+, Safari 15+) all support the `aspect-ratio` property; for older browsers, a `padding-bottom: 56.25%` hack on a wrapper achieves the same thing.
Frequently Asked Questions
What's the most common video aspect ratio?
16:9 is the dominant ratio for desktop video, YouTube, streaming services, and most TVs. 9:16 (vertical) is the standard for short-form mobile video — Instagram Reels, TikTok, YouTube Shorts. 1:1 (square) was the Instagram feed default for years and is still used for product carousels. 21:9 (cinematic) shows up in movie trailers and high-end web heroes.
How do I keep aspect ratio when resizing?
Calculate one new dimension and let the calculator (or your image editor's "keep proportions" option) compute the other. The math: new_height = (new_width × original_height) / original_width. The Resize tab on this page does it in one step.
What's the difference between aspect ratio and resolution?
Aspect ratio is the *shape* of the image (16:9, 4:3, 1:1) — a unitless proportion. Resolution is the *size* (1920×1080, 3840×2160) — measured in pixels. Two images can share an aspect ratio but have different resolutions: 1280×720 and 3840×2160 are both 16:9 but the latter has 9× more pixels.
What is 21:9 used for?
21:9 (technically 64:27, often written as 2.39:1 in cinema) is the cinematic widescreen ratio. It's used for movie production, ultrawide gaming monitors, immersive web hero sections, and some high-end action cameras. Most movie trailers on YouTube are released in this ratio with letterbox bars filling the 16:9 frame.
How do I write aspect-ratio in CSS?
Modern CSS supports `aspect-ratio: 16 / 9;` directly on any element. Combined with `width: 100%`, the height is computed automatically — no padding-bottom hack needed. The value can be a single number (`aspect-ratio: 1.778`) or a ratio (`aspect-ratio: 16 / 9`); both are valid.
Why does Instagram use 1:1 for the feed?
Square format was Instagram's launch constraint in 2010 and remains the canonical feed ratio. They later added 4:5 portrait and 16:9 landscape, but 1:1 is still the safest export size — it never gets cropped in the feed grid view, profile preview, or share previews.
Is 4:3 still used?
Yes, in three places: print photography (the 4:3 sensor is standard on Micro Four Thirds cameras and most phone wide cameras), legacy presentation slide decks (PowerPoint defaults to 16:9 now but plenty of templates are still 4:3), and tablet screens (iPad, Surface — though laptops and desktops moved to 16:9/16:10). 3:2 is the more common photography ratio in 2026.
Are images uploaded to your server?
No. The Aspect Ratio Calculator only handles numeric dimensions — it never touches actual image files. All math runs in your browser; nothing is transmitted anywhere.
Related Tools
Px to Rem Converter
Convert pixels to rem (and back) with a configurable root font size, copy-ready Tailwind class output, and a quick reference table of the most common front-end sizes.
Em to Px Converter
Convert em to px (and back) with explicit parent font size context and a compounding visualizer that shows how em multiplies through nested elements — so you don't get burned by the rem-vs-em confusion.
Pixels to Inches Converter
Convert pixels to inches, centimeters, millimeters, and points at any DPI. Includes inches to pixels conversion and a precomputed reference table.
Was this tool helpful?