Aspect Ratio Calculator

Calculate aspect ratios from dimensions, or find a missing dimension from a ratio. Includes common ratio reference.

Dimensions -> Ratio

x

Common Ratios

About the Aspect Ratio Calculator

This aspect ratio calculator lets you compute a missing dimension from any width/height pair, convert between common ratios like 16:9, 4:3 and 1:1, and find the simplified ratio for any custom dimensions. All calculations are instant and run in the browser.

Common use cases

Frequently Asked Questions

What is an aspect ratio and how is it calculated?

An aspect ratio is the proportional relationship between the width and height of an image, video, or screen, expressed as two integers separated by a colon - for example 16:9 or 4:3. It is calculated by dividing both dimensions by their Greatest Common Divisor (GCD). For a 1920x1080 image, GCD(1920, 1080) = 120, so the ratio simplifies to 16:9 (1920/120 : 1080/120). Aspect ratios are dimensionless - a 1280x720 image and a 3840x2160 image both have a 16:9 ratio despite different pixel sizes.

How do I calculate height from width while maintaining aspect ratio?

Use the "Calculate Dimension" tab above - enter the ratio (e.g. 16:9), set the known value (e.g. width = 1200), and select whether it is the width or height. The tool calculates the missing dimension as height = width x ratio_height / ratio_width. For example, a width of 1200 at 16:9 gives a height of 675. This is the standard formula for responsive image sizing, video embeds, and CSS padding-top intrinsic ratio containers.

What aspect ratios are used by common platforms and social media?

The most common aspect ratios are: 16:9 (YouTube, HD/4K video, most desktop monitors), 9:16 (Instagram Reels, TikTok, YouTube Shorts - vertical video), 1:1 (Instagram square posts, profile pictures), 4:5 (Instagram portrait posts), 4:3 (traditional TV, some cameras), 3:2 (DSLR cameras, 35mm film, MacBook displays), and 21:9 (ultrawide cinema monitors). The aspect ratio reference grid in this tool shows all common ratios with one-click input filling.

How do I use aspect ratios in CSS for responsive video embeds?

Modern CSS supports the aspect-ratio property directly: aspect-ratio: 16 / 9; on any element. For older browser compatibility, the padding-top hack still works: set position:relative; padding-top: 56.25%; (which is 9/16 x 100%) on the container, then position:absolute; top:0; left:0; width:100%; height:100%; on the video or iframe. The 56.25% figure is calculated from the ratio: for 16:9, height percentage = (9 / 16) x 100 = 56.25%.

What is the difference between aspect ratio and image resolution?

Aspect ratio describes the shape (proportional width-to-height relationship) while resolution describes the size in pixels. Two images can share the same aspect ratio but have completely different resolutions - 1280x720 and 3840x2160 are both 16:9 but one is HD and the other is 4K. Aspect ratio matters for layout and composition; resolution matters for sharpness and file size. When resizing an image to a different resolution, preserving the aspect ratio prevents distortion or stretching.