Aspect Ratio Calculator

Calculate exact aspect ratios with a live visual preview and get the best CSS code for the job.

🎯 Base Ratio

Width Ratio

Height Ratio

📏 Dimensions

Width (px)

Height (px)

Change either the width or height and the other value is calculated automatically.

PREVIEW

Modern CSS (aspect-ratio)

aspect-ratio: 16 / 9;

Legacy CSS (Padding Hack)


                      .container { position: relative; width: 100%; padding-top:
                      56.25%; }

                      .content { position: absolute; top: 0; left: 0; width:
                      100%; height: 100%; }

📖 How to Use

Base Ratio: type the ratio you want directly, or click a preset button to set it.
Dimensions: enter the width or height you already know and the matching value is calculated for you based on the current ratio.
Preview: the preview box reshapes in real time so you can see exactly how the ratio looks.
Code: both the modern aspect-ratio property and the padding-top fallback for older browsers are provided.

Aspect Ratio Guide: Keeping Perfect Proportions on Every Screen

The aspect ratio calculator is an essential tool for making sure images, videos, and card UIs keep their intended proportions on every device, without distortion. In responsive layouts, having the height adjust automatically as the width changes is the foundation of professional-looking design.

1. What is an aspect ratio?

An aspect ratio describes the numeric relationship between an element's width and height. A 16:9 ratio means that for every 16 units of width there are 9 units of height. On the web you constantly need to lock ratios in place — YouTube videos (16:9), classic photography (4:3), square cards and thumbnails (1:1), and more.

2. Modern CSS vs Legacy CSS

Modern CSS (aspect-ratio): in current browsers a single line — aspect-ratio: 16 / 9; — locks the ratio. It is intuitive and requires no extra wrapper markup.

Legacy CSS (Padding Hack): this technique exploits the fact that percentage values on padding-top are resolved against the parent element's width. A 16:9 ratio, for example, is implemented with padding-top: 56.25%, and it works in every browser.

3. Real-world use cases

The classic use case is the responsive video embed: the video should fill the available width while its height grows and shrinks in proportion. Aspect ratios are equally valuable in image galleries — when photos of different resolutions are laid out in a grid, locking every image to the same ratio (say, 3:2) makes the whole layout look far more polished.

4. Tips for using this tool

Enter a width and the tool instantly computes the matching height for the ratio you have set — or enter a height to get the width instead. Then pick whichever generated snippet fits your project: the modern aspect-ratio code for current browsers, or the legacy padding-based code if you still need to support IE.

Frequently Asked Questions

Q. How do I calculate the height for a 16:9 aspect ratio?

Multiply the width by 9 and divide by 16. A 1280px-wide video at 16:9 needs a height of 1280 × 9 ÷ 16 = 720px. This tool does that math automatically as you type.

Q. What is the CSS aspect-ratio property?

aspect-ratio is a modern CSS property that locks an element's width-to-height ratio in one line, e.g. aspect-ratio: 16 / 9;. The browser derives the missing dimension automatically, and it is supported by all modern browsers.

Q. What is the padding-top hack for aspect ratios?

Percentage values on padding-top are resolved against the parent's width, so padding-top: 56.25% creates a box whose height is 56.25% of its width — exactly 16:9. It is the classic fallback for browsers without aspect-ratio support, such as Internet Explorer.

Q. What are the most common aspect ratios?

16:9 for video and widescreen displays, 4:3 for classic photos and presentations, 1:1 for square thumbnails and social posts, 21:9 for ultrawide and cinematic content, 9:16 for vertical video like Shorts and Reels, and 3:2 for DSLR photography.