Aspect Ratio Calculator

What Is an Aspect Ratio?

An aspect ratio is the proportional relationship between the width and height of a rectangle. It is expressed as two numbers separated by a colon, such as 16:9 or 4:3. The first number represents the width, and the second represents the height. An aspect ratio does not describe a specific size — it describes a shape. A 16:9 rectangle could be 1920 x 1080 pixels, 1280 x 720 pixels, or 16 x 9 centimeters; the shape is the same regardless of scale.

Aspect ratios are fundamental in video production, photography, web design, print layout and display manufacturing. Choosing the right aspect ratio affects how content is framed, how much information fits on screen, and whether your media displays correctly across different devices.

How to Calculate an Aspect Ratio

To find the aspect ratio of any rectangle, you divide both the width and height by their greatest common divisor (GCD). For example:

• 1920 x 1080: The GCD of 1920 and 1080 is 120. Dividing both by 120 gives 16:9.
• 1024 x 768: The GCD of 1024 and 768 is 256. Dividing both by 256 gives 4:3.
• 1080 x 1080: The GCD is 1080. The ratio is 1:1 (a perfect square).

The GCD approach always produces the simplified ratio — the smallest whole-number expression of the proportion. Our calculator above does this automatically for any width and height you enter.

Common Aspect Ratios Explained

16:9 — The Modern Standard

The 16:9 aspect ratio dominates modern screens. It is the standard for HD television (720p, 1080p), 4K UHD (3840 x 2160), and most computer monitors. YouTube, Netflix and other streaming platforms default to 16:9. If you are creating video content for the web, 16:9 is the safe default choice.

4:3 — The Classic Format

Before widescreen displays became standard, 4:3 was the dominant aspect ratio for television and computer monitors. CRT TVs, early LCD monitors, and the original iPad all used 4:3. While less common for video today, 4:3 remains popular in presentation slides (though 16:9 slides are increasingly preferred) and some professional photography contexts.

1:1 — The Square

The 1:1 square format gained massive popularity through Instagram, which originally only supported square photos. While Instagram now supports other ratios, the square remains iconic for social media thumbnails, profile pictures and album artwork. Square formats work well in grid layouts because they tile evenly.

21:9 — Ultrawide and Cinema

The 21:9 aspect ratio (more precisely 64:27) is used by ultrawide monitors (typically 2560 x 1080 or 3440 x 1440) and closely approximates the anamorphic widescreen format (2.39:1) used in many Hollywood films. Ultrawide monitors are popular among gamers and professionals who benefit from the extra horizontal workspace.

3:2 — Photography Standard

The 3:2 ratio matches the proportions of 35mm film and is the native aspect ratio of most DSLR and mirrorless cameras. It is also used by some laptops (Microsoft Surface, Chromebook Pixel) because it provides more vertical space than 16:9 while remaining wider than 4:3, making it well-suited for productivity tasks.

9:16 — Vertical Video

The 9:16 ratio is simply 16:9 rotated 90 degrees. It is the standard for vertical video content on platforms like TikTok, Instagram Stories, YouTube Shorts and Snapchat. With mobile devices accounting for over half of all web traffic, vertical video has become a major content format.

Aspect Ratios in Web Design

Web developers and designers work with aspect ratios constantly:

• Responsive images — CSS properties like aspect-ratio: 16 / 9 (supported in all modern browsers) let you maintain consistent proportions as images and containers resize. This prevents layout shift (CLS), which is a Core Web Vital that affects SEO ranking.
• Open Graph images — Social media platforms have specific aspect ratio requirements for preview images. Facebook and LinkedIn recommend 1.91:1 (1200 x 630), while Twitter uses 2:1 (1200 x 600). Using the wrong ratio causes your preview image to be cropped unexpectedly.
• Video embeds — Embedding responsive videos requires maintaining the 16:9 ratio as the container width changes. The CSS aspect-ratio property or the classic padding-bottom hack (padding-bottom: 56.25% for 16:9) solves this problem.
• Hero sections and banners — Designing hero images and banner areas with consistent aspect ratios ensures they look correct across breakpoints from mobile (360px wide) to ultrawide desktop (3440px wide).

Calculating the Missing Dimension

A common task is finding the missing dimension when you know the aspect ratio and one side. The formulas are straightforward:

• Known width, find height: Height = Width × (Ratio Height / Ratio Width). Example: For 16:9 at width 1920, height = 1920 × (9/16) = 1080.
• Known height, find width: Width = Height × (Ratio Width / Ratio Height). Example: For 16:9 at height 720, width = 720 × (16/9) = 1280.

The “Find Dimension” tab in the calculator above performs these calculations instantly. Select a preset ratio or enter a custom one, choose which dimension you know, and the missing dimension is computed automatically.

Aspect Ratio vs Resolution

It is important to understand the distinction between aspect ratio and resolution. Resolution refers to the total number of pixels (e.g., 1920 x 1080), while aspect ratio describes the shape (e.g., 16:9). Multiple resolutions can share the same aspect ratio:

• 1280 x 720 (720p), 1920 x 1080 (1080p), 2560 x 1440 (1440p), 3840 x 2160 (4K) are all 16:9.
• 640 x 480 (VGA), 800 x 600 (SVGA), 1024 x 768 (XGA) are all 4:3.

Higher resolution means more detail (more pixels), but the shape of the image remains the same as long as the aspect ratio is identical. When resizing content between resolutions of the same aspect ratio, no cropping or letterboxing is needed.

What Happens When Aspect Ratios Do Not Match?

When content with one aspect ratio is displayed in a container with a different ratio, one of three things happens:

• Letterboxing — Black bars appear on the top and bottom (or sides) to fill the extra space. This preserves the entire frame but wastes screen area. You see this when watching a 21:9 movie on a 16:9 TV.
• Cropping — The content is enlarged to fill the container, and the overflow is cut off. This uses the full screen but loses part of the image. CSS object-fit: cover does this.
• Stretching — The content is distorted to fill the container exactly. This is almost always undesirable, as it makes circles look like ovals and people look unnaturally wide or tall.

Frequently Asked Questions

What aspect ratio is 1920 x 1080?

1920 x 1080 is a 16:9 aspect ratio. Dividing both dimensions by their GCD (120) gives 16:9. This is the standard Full HD resolution used by most monitors, TVs and streaming services.

How do I maintain aspect ratio in CSS?

Use the CSS aspect-ratio property: aspect-ratio: 16 / 9;. This is supported in all major browsers since 2021. For older browser support, the padding-bottom technique still works: padding-bottom: 56.25%; (which is 9/16 × 100%).

What is the best aspect ratio for YouTube?

YouTube recommends 16:9 for standard videos. YouTube Shorts uses 9:16 (vertical). While YouTube can display other ratios by adding letterboxing, 16:9 fills the player completely and provides the best viewing experience on desktop.

What aspect ratio is best for Instagram?

Instagram supports multiple ratios: 1:1 (square) for feed posts, 4:5 (portrait) for maximum feed real estate, and 9:16 for Stories and Reels. The 4:5 portrait format is often recommended for feed posts because it takes up the most screen space in the mobile app.

What is pixel aspect ratio (PAR)?

Pixel aspect ratio describes the shape of individual pixels. Most modern displays use square pixels (1:1 PAR), but some legacy video formats (DV, DVD) use non-square pixels. When working with footage that has non-square pixels, video editing software must apply the correct PAR to avoid distortion in the final output.