Aspect Ratio Calculator

What is an aspect ratio calculator?

An aspect ratio calculator determines the proportional relationship between the width and height of a rectangular shape. Aspect ratios are expressed as width:height (like 16:9 or 4:3) and are essential for video production, photography, responsive web design, and print layout. This tool calculates the aspect ratio from pixel dimensions or scales dimensions to match a desired ratio.

Understanding aspect ratios prevents content from looking stretched or cropped on different displays. A 16:9 video looks perfect on a widescreen TV but gets letterboxed (black bars) on a 4:3 display. Designers and developers use aspect ratios to create responsive layouts that maintain proportions across different screen sizes.

How to use this tool

Enter width and height in pixels to calculate the aspect ratio. Alternatively, enter a target ratio and one dimension to calculate the other. The tool reduces ratios to their simplest form (1920x1080 becomes 16:9) and shows common presets for quick reference.

How to calculate a missing dimension

An aspect ratio expresses the proportional relationship between width and height — independent of absolute size. The ratio 16:9 means that for every 16 units of width there are 9 units of height. Because the ratio is scale-independent, a 160×90 thumbnail and a 3840×2160 4K display share exactly the same aspect ratio.

To scale dimensions while preserving the ratio, use these two formulas. To find a new height from a new width: new height = new width × (original height ÷ original width). To find a new width from a new height: new width = new height × (original width ÷ original height). Both formulas simply apply the original ratio as a multiplier.

Worked example: scaling 1920×1080

Start with a Full HD frame of 1920×1080 pixels. First, simplify the ratio by finding the greatest common divisor (GCD) of 1920 and 1080. Using the Euclidean algorithm: GCD(1920, 1080) = GCD(1080, 840) = GCD(840, 240) = GCD(240, 120) = 120. Dividing both dimensions by 120 gives 16:9 — the familiar widescreen ratio.

Now suppose you need to scale that video to a width of 1280 pixels for a smaller display. Apply the formula: new height = 1280 × (1080 ÷ 1920) = 1280 × 0.5625 = 720. The scaled frame is 1280×720 — also known as 720p HD — and still exactly 16:9.

Rounding warning: pixel dimensions must be whole numbers. Always round to the nearest integer. For video encoding, round down to the nearest even number to avoid codec errors with chroma subsampling (e.g., YUV 4:2:0 requires even dimensions).

Common aspect ratios and where they are used

• 16:9 — The dominant standard for HD and 4K video. Used by YouTube, Netflix, Twitch, modern televisions, and most desktop monitors. Representative resolutions: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD).
• 4:3 — The legacy standard for CRT televisions and early computer monitors. Still used for presentations, some iPad models, and vintage film formats. A 1920×1080 widescreen video displayed on a 4:3 screen gains horizontal black bars (letterboxing).
• 1:1 — The square format. Essential for Instagram feed posts, profile pictures, app icons, and album artwork. Easy to crop from any wider format without losing the subject.
• 9:16 — The vertical counterpart of 16:9. The native format for smartphone screens held in portrait orientation. Used by Instagram Stories, TikTok, YouTube Shorts, and Snapchat.
• 21:9 — Ultrawide cinema and monitor format. Common in cinematic films (often displayed as 2.35:1 or 2.39:1) and ultrawide gaming monitors. Content shot in 16:9 gains vertical black bars (pillarboxing) on a 21:9 display.
• 3:2 — The classic 35mm film ratio, carried over into most digital SLR and mirrorless cameras. A 6×4 inch print is 3:2. Typical resolutions include 6000×4000 (24 MP) and 7952×5304 (42 MP).

Common aspect ratios

• 16:9 — widescreen standard for HD/4K video, modern monitors, YouTube, streaming services.
• 4:3 — traditional TV and computer monitors, iPad, presentation slides.
• 21:9 — ultrawide monitors and cinematic content.
• 1:1 — square format, Instagram posts, profile pictures.
• 9:16 — vertical video for mobile content (Stories, TikTok, Shorts).

Letterboxing and pillarboxing: what happens when ratios mismatch

When the aspect ratio of the content does not match the aspect ratio of the container, the display must compensate. Letterboxing adds horizontal black bars at the top and bottom — you see this when watching a 2.39:1 cinema film on a 16:9 TV. Pillarboxing adds vertical black bars on the left and right — you see this when a 4:3 broadcast is shown on a 16:9 widescreen. When both pairs of bars appear (content is smaller than the container in both dimensions), the effect is called windowboxing.

The alternative to boxing is cropping or stretching. Cropping fills the container but cuts off part of the image. Stretching fills the container but distorts the image — faces and circles become ovals. Neither is ideal, which is why choosing the right output ratio from the start avoids post-production headaches.

Common mistakes to avoid

• Ignoring the ratio when resizing: typing a new width without updating the height produces distorted, stretched content. Always lock the aspect ratio before resizing.
• Rounding both dimensions independently: rounding width up and height down (or vice versa) introduces a tiny ratio drift that compounds across multiple resizes. Round one dimension, then calculate the other from the rounded value.
• Confusing display ratio with storage ratio: anamorphic video (common in broadcast and Blu-ray) stores pixels at one ratio but signals the player to display at another. Always check the Sample Aspect Ratio (SAR) metadata, not just the frame dimensions.
• Assuming 16:9 is universal: mobile-first design often requires 9:16 assets. Social platforms may auto-crop to 4:5 or 1.91:1. Export multiple crops rather than relying on a single ratio.

Aspect ratios in web design

In CSS, the aspect-ratio property maintains proportions for responsive elements. Before this property existed, developers used the padding-bottom hack (padding-bottom: 56.25% for 16:9). Modern CSS makes it simple: set aspect-ratio: 16 / 9 on any element. This is crucial for embedding videos, creating image galleries, and designing card layouts that look consistent across devices.

Frequently asked questions

What aspect ratio is 1920x1080?

1920x1080 (Full HD) has an aspect ratio of 16:9, which is the standard widescreen format. Other common 16:9 resolutions include 2560x1440 (QHD), 3840x2160 (4K UHD), and 1280x720 (HD). The 16:9 ratio became the standard for high-definition content because it offers a wider field of view than 4:3 while being practical for most content types.

How do I maintain aspect ratio when resizing?

Lock the aspect ratio in your editing tool (usually a chain link icon between width and height fields). When you change one dimension, the other adjusts proportionally. Mathematically: new height = new width / (original width / original height). For example, to resize a 1920x1080 image to 1280 wide: 1280 / (1920/1080) = 720.

What is the GCD and why does it matter?

The Greatest Common Divisor (GCD) is the largest number that divides both width and height without a remainder. Dividing both dimensions by their GCD reduces the ratio to its simplest form. For example, GCD(1280, 720) = 80; 1280 ÷ 80 = 16 and 720 ÷ 80 = 9, giving 16:9. Without simplification you would see 1280:720 instead of the recognizable 16:9 label.

Is 4:3 really the same as 1.33:1?

Yes. Aspect ratios can be expressed as width:height with whole numbers (4:3) or as a decimal ratio (1.33:1, where 4 ÷ 3 ≈ 1.333). Film and cinema traditionally use the decimal form — 1.85:1 (flat widescreen) and 2.39:1 (anamorphic scope) — while video and web design favour the whole-number colon form. This calculator shows both: the simplified ratio (16:9) and the decimal equivalent (1.7778).