Aspect Ratios Explained: A Guide for Developers and Designers

Aspect ratio is the proportional relationship between the width and height of an image, video or screen. It determines the shape of your content and affects everything from responsive layouts to social media uploads. Understanding aspect ratios helps you avoid distorted images, wasted screen space and cropping surprises.

What is an Aspect Ratio?

An aspect ratio is expressed as two numbers separated by a colon, like 16:9. The first number represents the width and the second represents the height. A 16:9 ratio means that for every 16 units of width, there are 9 units of height. The actual pixel dimensions do not matter. Both 1920 x 1080 and 1280 x 720 are 16:9.

The ratio is always reduced to its simplest form. A 1920 x 1080 image has a raw ratio of 1920:1080, which simplifies to 16:9 when you divide both sides by their greatest common divisor (120).

Common Aspect Ratios

Different aspect ratios serve different purposes. Here are the ones you will encounter most often:

• 16:9 (Widescreen): The standard for HD and 4K video, computer monitors and TV screens. Common resolutions include 1920 x 1080 (Full HD), 2560 x 1440 (QHD) and 3840 x 2160 (4K UHD). YouTube, Vimeo and most streaming platforms expect 16:9 video.
• 4:3 (Classic): The traditional TV and early computer monitor ratio. Still used in presentations (1024 x 768), iPads and some document formats. Many older photos were shot at 4:3.
• 1:1 (Square): Popular on Instagram, profile avatars and product thumbnails. Common sizes are 1080 x 1080 for social posts and 500 x 500 for e-commerce listings.
• 21:9 (Ultrawide): Used by ultrawide monitors (2560 x 1080, 3440 x 1440) and cinematic video. Some websites use this ratio for immersive hero sections.
• 9:16 (Vertical): The standard for mobile-first content including TikTok videos, Instagram Reels, YouTube Shorts and Snapchat stories. Typically 1080 x 1920.
• 3:2: Common in photography (the default sensor ratio for many DSLR cameras) and used by some laptop screens like the Surface lineup. Typical resolutions include 3000 x 2000.
• 1.91:1: The ratio used for Open Graph social share images (1200 x 630). Facebook, Twitter and LinkedIn all display link previews at approximately this ratio.

Calculating Aspect Ratios

To find the aspect ratio of any image, divide both the width and height by their greatest common divisor (GCD). You can compute the GCD using the Euclidean algorithm:

function gcd(a: number, b: number): number {
  return b === 0 ? a : gcd(b, a % b);
}

function getAspectRatio(width: number, height: number) {
  const divisor = gcd(width, height);
  return `${width / divisor}:${height / divisor}`;
}

getAspectRatio(1920, 1080); // "16:9"
getAspectRatio(1200, 630);  // "40:21" (≈ 1.91:1)

To calculate the missing dimension when you know one side and the target ratio, use simple cross-multiplication. For a 16:9 ratio with a width of 1280: height = 1280 x (9 / 16) = 720.

The CSS aspect-ratio Property

Modern CSS includes a native aspect-ratio property that makes it easy to maintain proportions in responsive layouts:

/* Set a 16:9 container */
.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Square thumbnail */
.avatar {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

The aspect-ratio property is supported in all modern browsers. Before this property existed, developers used the "padding-bottom hack" where a percentage padding-bottom on a zero-height container created the ratio (for example, padding-bottom: 56.25% for 16:9). The new property is much cleaner.

Responsive Design Considerations

In responsive layouts, maintaining aspect ratio prevents layout shifts and visual distortion. When an image or video container resizes with the viewport, a fixed aspect ratio ensures the content scales proportionally instead of stretching.

For images, combine width and height attributes on the img tag with CSS max-width: 100% and height: auto. The browser uses the width/height attributes to calculate the intrinsic aspect ratio and reserve space before the image loads, preventing Cumulative Layout Shift (CLS).

For embedded videos, wrap the iframe in a container with aspect-ratio: 16 / 9 and set the iframe to fill the container with width: 100% and height: 100%.

Video and Image Ratios

Video platforms are strict about aspect ratios. Uploading a 4:3 video to a platform that expects 16:9 results in black bars (letterboxing). Most video editors let you set the project aspect ratio before you start editing. For web playback, the HTML video element respects the source file's native ratio by default.

For images, the object-fit CSS property controls how an image fills its container when the aspect ratios do not match. Use object-fit: cover to fill the container (cropping edges), object-fit: contain to fit inside (adding letterbox), or object-fit: fill to stretch (which distorts the image).

Social Media Image Sizes by Platform

Each social platform has its own preferred dimensions. Here is a quick reference:

• Facebook post: 1200 x 630 (1.91:1)
• Twitter post: 1200 x 675 (16:9) or 1200 x 630
• Instagram feed: 1080 x 1080 (1:1), 1080 x 1350 (4:5 portrait), 1080 x 566 (1.91:1 landscape)
• Instagram Story / Reel: 1080 x 1920 (9:16)
• LinkedIn post: 1200 x 627 (1.91:1)
• YouTube thumbnail: 1280 x 720 (16:9)
• TikTok: 1080 x 1920 (9:16)
• Pinterest pin: 1000 x 1500 (2:3)

When creating images for multiple platforms, design at the largest required size and crop or resize for each target. Starting with a 1200 x 1200 master image lets you crop to landscape (1200 x 630), portrait (1080 x 1350) or square (1080 x 1080) without losing important content.