Aspect Ratio Calculator resizes any image, video, or design surface while keeping the width-to-height ratio exact. Type an original width and height, then edit either dimension of the new size — the other value updates instantly to preserve the ratio. It shows the simplified ratio (e.g. 16:9), the exact decimal, and a ready-to-paste CSS aspect-ratio value. One-click presets cover the common video and social sizes: YouTube 1920×1080, Instagram Reels 1080×1920, Open Graph 1200×630, Pinterest pins, and more. Everything runs in your browser — nothing is uploaded.
What the aspect ratio calculator does
The calculator solves the everyday resize problem: you have an image or video at one size, and you need to scale it to a new width or a new height without squashing or stretching. Enter the original width and height, then edit either dimension of the new size — the other value follows automatically so the ratio stays perfect.
- Simplified ratio — 1920×1080 becomes
16:9, 1200×628 becomes about1.91:1. The tool uses the greatest common divisor to reduce integer inputs, and a continued-fraction approximation for decimals. - CSS aspect-ratio — a ready-to-paste value like
aspect-ratio: 16 / 9;for modern browser layouts. - Visual preview — two boxes drawn to scale so you can see whether the new size matches the original ratio.
- Presets — one-click ratios (16:9, 4:3, 1:1, 9:16, 21:9) and platform sizes (YouTube, Instagram, TikTok, LinkedIn, Open Graph, Pinterest).
Aspect ratio, dimensions, and resolution — what's the difference?
These three terms get mixed up constantly.
- Aspect ratio is the shape of the frame — the width divided by the height, usually expressed as two whole numbers like 16:9 or as a decimal like 1.7778.
- Dimensions are the actual pixel width and height — 1920×1080, 3840×2160, 1280×720. Two images with the same aspect ratio can have very different dimensions.
- Resolution loosely means "how much detail" and depends on both dimensions and, for print, dots-per-inch. 1080p, 4K, and 8K all share the 16:9 ratio.
The calculator only cares about ratio and dimensions. Resolution follows: if you scale from 1920×1080 to 3840×2160, the ratio is unchanged and the pixel count quadruples.
The ratios you'll actually use
Ratio choice is dictated by where the asset lives, not by taste.
- 16:9 — HD and 4K video, YouTube, most modern screens. The safe default for landscape video.
- 9:16 — vertical video for Instagram Reels, TikTok, YouTube Shorts, Snapchat, and phone lock screens. Everything shot on a phone held upright.
- 1:1 — square. Instagram feed classic, Twitter avatars, YouTube channel thumbnails.
- 4:5 — Instagram portrait feed. Occupies more vertical space in the timeline than 1:1, which improves engagement.
- 1.91:1 — the Open Graph / Twitter card / LinkedIn share aspect ratio, roughly 1200×630. Every image you paste into a social share preview should use this.
- 2:3 and 1000×1500 — Pinterest pins. Portrait dominates their feed.
- 21:9 and 2.39:1 — ultrawide monitors and modern anamorphic film.
- 4:3 and 3:2 — legacy formats, print photography, older tablets. Still relevant for magazine and camera work.
How the math works
Ratio is width divided by height. Preserving it during a resize means: given original W₁ × H₁, if you pick a new width W₂, the matching height is H₂ = W₂ × H₁ / W₁. If you pick a new height instead, the matching width is W₂ = H₂ × W₁ / H₁. The tool does exactly this — one field is "locked" (the one you last edited) and the other is derived.
Simplification uses the Euclidean algorithm — the greatest common divisor of width and height. 1920 and 1080 both divide by 120, so 1920:1080 reduces to 16:9. For decimal ratios like 2.35, a continued-fraction expansion finds the closest small-integer approximation (2.35 ≈ 47:20 or, with a larger denominator, 235:100).
Using the CSS aspect-ratio value
The modern CSS aspect-ratio property lets you reserve space for an image, video, or embed before it loads — which prevents layout shift (a Core Web Vitals metric, CLS). Baseline support is universal since 2021: Chrome, Firefox, Safari, and Edge all ship it.
.hero-video {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}The calculator emits the value in the exact form the CSS parser expects (16 / 9, not 16:9). Copy it and paste into your stylesheet.
Common pitfalls when resizing
- Rounding — 1200 × 9 / 16 is 675, but 1200 × 9 / 19 is 568.42. Non-integer results should be rounded to the nearest whole pixel. The tool does this automatically for display but preserves precision internally.
- Cropping vs stretching — resizing changes size while keeping ratio; cropping or letterboxing is what you need when the target ratio is different from the source. This tool is for pure resizing.
- Upscaling — you can always compute a larger size, but images don't gain detail when enlarged. Use a source at or above the largest dimension you'll display.
- Anamorphic pixels — some older camera formats use non-square pixels. The calculator assumes square pixels, which is correct for every modern image and video format (JPEG, PNG, WebP, MP4/H.264, HEVC, AV1).
Privacy and offline use
The calculator is pure client-side JavaScript — no fetches, no logging, no analytics beacons fire when you type. You can disconnect from the internet and every calculation still works. Open your browser's Network tab and confirm: zero requests as you edit values.