Aspect Ratio Calculator

Calculate and simplify image and video aspect ratios (16:9, 4:3, 9:16, 21:9). Solve for missing width or height with locked proportional scaling.

Original Dimensions (Pixels)

Proportional Resizer (Solve for Unknown)

Visual Aspect Ratio & Shape

16 : 9
Simplified Integer Ratio
16 : 9
Decimal Ratio: 1.778 : 1 • 2.07 Megapixels

⚖️ Decision Verdict: Standard Widescreen (16:9)

The 16:9 aspect ratio is the international television and YouTube widescreen standard. Scaling 1920×1080 down to 1280px width preserves exact proportion at 1280 × 720 px (720p HD) without letterboxing.

Technical Specifications & Code Snippets

CSS Aspect-Ratio Property
16 / 9
aspect-ratio: 16 / 9;
Total Pixel Count
2,073,600
2.07 MP raw resolution
Orientation
Landscape
Horizontal widescreen format
Greatest Divisor (GCD) 120 Simplification factor
Decimal Ratio 1.778 Width ÷ Height
Target Scaled Size 1280 × 720 0.92 Megapixels
Common Use Case YouTube / TV Standard HD broadcast

About this tool

How to use it

  1. Enter the original width and height in pixels or select a standard resolution preset (e.g. 1080p, 4K, Reels, Ultrawide).
  2. View the simplified ratio (e.g. 16:9, 4:3, 9:16) reduced using greatest common divisor (GCD) arithmetic.
  3. Enter a new target width to automatically solve for the proportional height (or vice versa).
  4. Click 'Swap W × H' to instantly rotate between landscape and portrait orientations.
  5. Copy the CSS `aspect-ratio` code snippet for responsive web design.

Why it matters

Resizing digital images or video assets without maintaining the exact original aspect ratio results in ugly distortion, squishing, stretching, or unwanted black bars (letterboxing/pillarboxing). Calculating proportional scaling guarantees that assets maintain crisp geometric fidelity across desktop monitors, mobile feeds, and tablet screens.

When to use it

Use this calculator when exporting video for social media platforms (TikTok, Instagram Reels, YouTube), resizing photography for web publishing, setting up responsive CSS media containers, or configuring monitor display resolutions.

Good to know

CSS Aspect Ratio Support: Modern browsers natively support the `aspect-ratio` CSS property (e.g. `aspect-ratio: 16 / 9;`), preventing layout shift (CLS) by reserving container space before images load.

Common questions

What is an aspect ratio?

An aspect ratio is the proportional relationship between the width and height of an image or screen, expressed as two numbers separated by a colon (e.g. 16:9), regardless of the actual pixel dimensions.

What is the difference between 16:9 and 9:16?

16:9 is a horizontal widescreen orientation used for TV, cinema, and YouTube, where width is greater than height. 9:16 is vertical video orientation, where height is greater than width, used for smartphone apps like TikTok, YouTube Shorts, and Instagram Reels.

What causes letterboxing and pillarboxing?

Letterboxing occurs when horizontal black bars appear at the top and bottom of the screen (e.g. widescreen film on a square 4:3 monitor). Pillarboxing occurs when vertical black bars appear on the left and right sides (e.g. 4:3 video on a 16:9 widescreen TV).

How do I prevent image distortion when resizing?

Always lock the aspect ratio when scaling. If you change width from 1920 to 1280 (multiplying by 0.667), you must multiply the height (1080) by the exact same factor to obtain 720.

How does aspect ratio relate to megapixels?

Total megapixels equal (Width × Height) / 1,000,000. Two images can have identical 16:9 aspect ratios but vastly different megapixel resolutions (e.g. 1080p is 2.07 MP, while 4K is 8.29 MP).