ToolBook
Support us on Ko-fi
Help us keep this free, forever

Aspect Ratio Calculator

Bug

How to use the Aspect Ratio Calculator

Pick a preset or enter a custom ratio, then solve for a missing dimension.

  1. Pick a preset or enter a custom ratio

    Click a preset (16:9, 4:3, 1:1, etc.) to fill the ratio fields, or type any custom ratio in the W:H fields. The visual preview updates to show the proportions.

  2. Enter a known dimension

    Type a width or height in pixels (or any unit). The missing dimension is calculated automatically and the orientation label updates instantly.

  3. Read the result

    The calculated dimension, simplified ratio, decimal equivalent, total pixels, and orientation are shown in the results panel. The canvas preview scales proportionally so you can see the shape at a glance.

  4. Copy the CSS snippet

    Use the ready-to-copy CSS property or padding-bottom fallback from the results panel to lock the ratio in your stylesheet without any JavaScript.

Frequently asked questions

What is an aspect ratio?

Aspect ratio is the proportional relationship between a rectangle's width and height, expressed as W:H. A 16:9 frame is exactly 16 units wide for every 9 units tall: 1920×1080 px, 1280×720 px, and 3840×2160 px are all 16:9. The ratio stays constant at any absolute size.

How do I resize an image while keeping the aspect ratio?

Enter the original width and height in the "Dimensions" fields. The tool shows the simplified ratio. Then clear one field and type the target value; the tool calculates the other dimension so the ratio is preserved. For example, a 1200×900 px image at 4:3: type 800 in the width field and the tool gives 600 px height.

What aspect ratio should I use for YouTube thumbnails?

YouTube thumbnails display at 16:9 (1280×720 px minimum, 1920×1080 px recommended). Select the 16:9 preset, enter 1920 in the width field, and the tool confirms the height is 1080 px.

What aspect ratio should I use for Instagram posts and Reels?

Square posts: 1:1 (1080×1080 px). Portrait feed posts: 4:5 (1080×1350 px). Reels and Stories: 9:16 (1080×1920 px). All three presets are available in the preset library.

How do I find the aspect ratio of an image I already have?

Enter the image's pixel width and height in the "Width" and "Height" fields. The tool simplifies the ratio to the lowest whole numbers — for example, 2560×1440 simplifies to 16:9, and 1500×1000 simplifies to 3:2.

What is the difference between portrait and landscape aspect ratio?

A landscape ratio is wider than it is tall (width greater than height) — 16:9, 21:9, and 4:3 are landscape. A portrait ratio is taller than it is wide — 9:16 and 4:5 are portrait, used for phone screens, Reels, and Stories. A 1:1 ratio is square. The tool labels the orientation automatically once you enter a ratio.

What does the decimal ratio (e.g. 1.78:1) mean?

The decimal ratio expresses how many units wide the frame is for every 1 unit of height. 16:9 = 1.78:1, 4:3 = 1.33:1, 21:9 = 2.33:1. Cinematographers and display manufacturers often use decimal notation, so both formats are shown in the results panel.

How do I use the CSS aspect-ratio property from this tool?

The results panel shows a ready-to-copy CSS snippet: `aspect-ratio: 16 / 9;` for modern browsers. We also show the padding-bottom fallback percentage (56.25% for 16:9) for older browsers. Paste either into your stylesheet — the container will maintain the ratio as its width changes.

Should I crop or add black bars when my video does not match the target ratio?

Cropping removes content to fill the frame cleanly; this works best when the subject is centred and the edges are empty. Black bars (letterboxing or pillarboxing) preserve the full frame but leave empty space. Most social platforms crop automatically, so keep important content away from the edges if you upload to multiple ratios.

Aspect ratios: why 16:9 took over screens, and how to scale dimensions without distortion

The history of display ratios, why cropping a portrait video to landscape destroys it, and the math behind keeping images sharp at any size.

What an aspect ratio is and why it matters

Aspect ratio is the proportional relationship between width and height, expressed as W:H. A 16:9 frame means for every 16 units wide, the frame is 9 units tall. The key insight is that the ratio is scale-invariant: 1280×720, 1920×1080, and 3840×2160 are all 16:9, just at different absolute sizes.

This matters because screens, cameras, and platforms each have a "native" ratio, and content that doesn't match gets either letterboxed (black bars) or cropped. A vertical 9:16 TikTok video played on a 16:9 YouTube thumbnail looks terrible — understanding the ratio before you shoot or design saves hours of resizing.

Why 16:9 took over

Until the early 2000s, television and computer monitors used 4:3 — matching the aspect ratio of 35mm film's Academy aperture. Widescreen cinema (2.35:1 anamorphic, 1.85:1 flat) was always wider, creating letterbox bars on home screens.

HDTV standards converged on 16:9 as a compromise: wider than 4:3 (so widescreen movies look better), narrower than 2.35:1 (so you don't waste too much screen on black bars for the most common cinema format), and close enough to 4:3 that older content doesn't look dramatically wrong. The ratio also tiles perfectly: four 16:9 panels arranged in a 2×2 grid make a 32:18 (= 16:9) super-screen.

The math of scaling

To scale dimensions while preserving ratio, you multiply by a constant factor k. If the original is W×H and you want a new width W₂: H₂ = H × (W₂/W). The simplest form of the ratio comes from dividing both dimensions by their greatest common divisor (GCD). So 2560×1440 → GCD(2560, 1440) = 320 → 8:4.5 → multiply by 2 → 16:9.

Common platform requirements

| Platform | Ratio | Recommended size | |---|---|---| | YouTube video | 16:9 | 1920×1080 | | Instagram square | 1:1 | 1080×1080 | | Instagram portrait | 4:5 | 1080×1350 | | TikTok / Reels | 9:16 | 1080×1920 | | Twitter/X header | 2:1 | 1500×750 | | DSLR photo | 3:2 | 6000×4000 | | Ultrawide monitor | 21:9 | 3440×1440 |

When in doubt: design at the highest resolution you'll need and scale down, not up. Scaling up always reduces sharpness.

Related tools

Utility

Image Resizer

Pixel-perfect resizing in your browser. No uploads, ever.

Utility

Image Compressor

Compress JPEG, PNG and WebP. Your images stay on your device.

Utility

Unit Converter

Length, weight, speed, temp, pressure, and more. Live as you type.