Aspect Ratio Calculator

Calculate, resize, and compare image or video aspect ratios. Get CSS output instantly.

Enter width and height above to calculate the aspect ratio.

How to Use the Aspect Ratio Calculator

  1. Calculate mode — Enter any width and height to get the simplified aspect ratio, orientation, CSS value, and megapixel count.
  2. Resize mode — Provide a ratio (e.g., 16:9) and one known dimension to calculate the missing dimension.
  3. Common Ratios — Browse 12 standard ratios with typical resolutions. Click any card to load it into the calculator.
  4. Compare mode — Enter two sets of dimensions to see whether they share the same aspect ratio.

What Is an Aspect Ratio?

An aspect ratio is the proportional relationship between the width and the height of a rectangle — most commonly applied to images, videos, screens, and containers on the web. It is written as two integers separated by a colon, such as 16:9 or 4:3. The ratio 16:9 simply means the width is 16 units for every 9 units of height, regardless of actual pixel dimensions. A 1920×1080 screen and a 1280×720 screen share the same 16:9 aspect ratio.

Why Aspect Ratios Matter in Design

Maintaining the correct aspect ratio is essential in web and graphic design for several reasons:

  • Image quality — Cropping or stretching an image without maintaining its ratio produces distorted visuals.
  • Responsive layouts — CSS containers often need to preserve a ratio as their width changes, especially for video embeds and hero images.
  • Social media compliance — Each platform specifies required ratios (e.g., Instagram 1:1, Twitter 16:9, LinkedIn 1200×628).
  • Print design — A4 paper is approximately 1:√2, and understanding this ratio prevents content from being cut off.
  • Video production — Selecting the wrong ratio during export leads to black bars (letterboxing or pillarboxing).

Common Aspect Ratios and Their Uses

  • 16:9 — The universal widescreen standard. Used by YouTube, Netflix, HDTVs, most laptop screens, and video games. Resolutions: 1280×720, 1920×1080, 2560×1440, 3840×2160.
  • 4:3 — The classic TV and CRT monitor standard. Still used in some projectors and older presentation slides. Resolutions: 800×600, 1024×768.
  • 21:9 — Ultra-wide cinema format used in cinematic films and ultra-wide monitors. Resolutions: 2560×1080, 3440×1440.
  • 1:1 — Perfect square. Used for Instagram posts, app icons, and avatar thumbnails.
  • 9:16 — Vertical video for TikTok, Instagram Reels, and YouTube Shorts. 1080×1920.
  • 3:2 — Standard camera sensor ratio. Used in DSLR/mirrorless cameras and 35mm film. 3000×2000, 6000×4000.
  • 2:1 — Double-wide banner format, common in Twitter header images.
  • 5:4 — Near-square, used in older CRT monitors and some print formats (8×10 inches).

The CSS aspect-ratio Property

The modern CSS aspect-ratio property lets you define a box's ratio without JavaScript or the old padding-top trick. For example:

  • aspect-ratio: 16 / 9; — maintains 16:9 as width changes
  • aspect-ratio: 1 / 1; — perfect square container
  • aspect-ratio: auto; — falls back to the element's intrinsic ratio

This tool outputs the correct aspect-ratio CSS value for any dimensions you enter, making it easy to copy directly into your stylesheet.

Calculating Missing Dimensions

The Resize mode solves the most common design math problem: given an existing ratio and one dimension, what is the other? For example, if you know a banner must be 728 pixels wide and maintain a 16:9 ratio, the height should be (728 / 16) × 9 = 409.5 pixels, rounded to 410. This tool handles the math instantly. For related tools, check our Placeholder Image Generator and Color Converter.

Frequently Asked Questions

An aspect ratio is the proportional relationship between the width and height of an image, video, or screen. It is expressed as two numbers separated by a colon, such as 16:9 or 4:3. A 16:9 ratio means the width is 16 units for every 9 units of height.
The CSS aspect-ratio property sets the preferred aspect ratio for a box. For example, aspect-ratio: 16 / 9; makes an element maintain a 16:9 ratio as its dimensions change. It is widely supported in modern browsers and eliminates the old padding-top hack.
Divide the new width by the ratio width, then multiply by the ratio height. For example, for a 16:9 ratio with a new width of 1280: height = (1280 / 16) × 9 = 720. Use the Resize mode in this calculator to do this automatically.
YouTube recommends 16:9 for standard horizontal videos. The recommended upload resolution is 1920×1080 (Full HD) or 3840×2160 (4K). For YouTube Shorts, use 9:16 vertical video at 1080×1920.
4:3 is the traditional TV and monitor ratio, squarish in appearance and used in older CRT monitors and SD video. 16:9 is the modern widescreen standard used in HD/4K TVs, YouTube, and most modern monitors. 16:9 shows more horizontal content and is better for cinematic experiences.