Aspect Ratio Calculator

This free aspect ratio calculator turns any width and height into a simplified ratio like 16:9, its decimal value, and ready-to-paste code: the CSS aspect-ratio property, the legacy padding-top hack, and Tailwind classes. It also solves for a missing dimension so you can resize without distortion. Everything runs entirely in your browser, so your numbers stay private with no upload, account, or signup required.

How to use the aspect ratio calculator

1. Enter your width in the first field — for example, the pixel width of a video, image, or container.
2. Enter your height in the second field.
3. Read the simplified ratio (such as 16:9) and its decimal value, which appear instantly as you type.
4. Copy the generated code you need: the CSS aspect-ratio property, the legacy padding-top percentage, or the matching Tailwind class.
5. To resize, lock the ratio and change one dimension — the calculator solves for the missing value so your media never stretches or squashes.

There is nothing to install and no data leaves your device. The calculation happens in JavaScript on the page itself, so it works offline once loaded and never sends your measurements anywhere.

What an aspect ratio actually is

An aspect ratio describes the relationship between an element’s width and its height, written as two numbers separated by a colon, like 16:9. It is independent of size: a thumbnail and a cinema screen can share the same 16:9 ratio even though their pixel dimensions are wildly different. That is what makes the ratio so useful — it tells you the shape of a frame without tying you to a specific resolution.

To simplify a ratio, you divide both numbers by their greatest common divisor (GCD). Take a 1920×1080 screen: the GCD of 1920 and 1080 is 120, so dividing both gives 16:9. A 1280×800 display has a GCD of 160, which reduces to 8:5 (often written 16:10). The calculator runs this GCD reduction for you, so any odd pixel pair collapses into its cleanest form automatically.

Common aspect ratios and where they are used

A handful of ratios dominate design and media work. The table below lists the most common ones with their decimal value (width divided by height) and where you are likely to meet them.

Choosing the right ratio is mostly about the destination. Landscape 16:9 suits desktop video, while 9:16 is the native shape for vertical mobile feeds. Square 1:1 remains a safe bet for social grids because it crops predictably across platforms.

CSS aspect-ratio property vs the padding-top hack

Modern CSS lets you reserve space for an element with a single line. The aspect-ratio property accepts a ratio directly, and the browser keeps the box proportional as its width changes:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Before this property landed, developers faked it with the padding-top hack. Because vertical padding is calculated from the parent’s width, a percentage equal to height ÷ width × 100 forces a proportional box:

.video-legacy {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-legacy > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

The native aspect-ratio property is supported in all current versions of Chrome, Edge, Firefox, and Safari, so it is safe for production today. Reach for the padding-top hack only when you must support very old browsers. The Tailwind equivalent is a utility class such as aspect-video for 16:9, aspect-square for 1:1, or an arbitrary value like aspect-[21/9].

Resizing while keeping the same ratio

Solving for a missing dimension is just cross-multiplication. If you know the target width and want the height that preserves the ratio, multiply the width by height ÷ width of the original. For a 16:9 banner that must be 1200px wide, the height is 1200 × (9 / 16) = 675px. Going the other way, a fixed 400px height at 16:9 needs a width of 400 × (16 / 9) ≈ 711px.

Doing this by hand invites rounding mistakes, especially with awkward ratios. Enter one dimension into the calculator, keep the ratio locked, and it returns the other value instantly — handy for exporting image sets, sizing embeds, or matching a design comp to real breakpoints.

Standard resolutions and their aspect ratios

When you are matching a design to a real device or export preset, it helps to read the ratio straight off a known pixel size rather than calculating it each time. The table below maps the resolutions you meet most often — desktop, video, and social — to the simplified aspect ratio they reduce to.

Notice how several different resolutions in the list collapse to the same ratio: 1280×720 and 3840×2160 are worlds apart in pixel count but both reduce to 16:9. That is why a single layout can target many screens at once — the shape is shared even when the detail is not.

Cinema and film aspect ratios

Motion-picture formats use wider ratios than the web, and they are usually written as a single decimal followed by :1 rather than as two whole numbers. The theatrical “flat” standard is 1.85:1, while “scope” or anamorphic widescreen is 2.39:1 — the very wide frame you see in most blockbusters. Older television and early film used the near-square 1.37:1 Academy ratio. If you paste a cinema resolution such as 4096×1716 into the calculator, it reduces toward this 2.39:1 shape, which is handy when you are sizing a hero video or letterboxing footage for the web. Because these formats are wider than a typical 16:9 browser viewport, embedding them usually means adding horizontal black bars or cropping the sides, so it pays to confirm the target ratio before you export. Matching the export ratio to the frame it will live in keeps the footage sharp and avoids the soft, stretched look that comes from scaling to a mismatched shape.

Frequently asked questions

What is an aspect ratio?

An aspect ratio is the proportional relationship between an element’s width and height, expressed as two numbers like 16:9. It defines the shape of a frame regardless of its actual pixel size, so any image scaled up or down keeps the same ratio.

How do I calculate an aspect ratio by hand?

Divide both the width and the height by their greatest common divisor. For 1920×1080, the GCD is 120, and dividing both numbers gives 16:9. If you only need the decimal, divide width by height — 1920 / 1080 = 1.778.

What is 16:9 in actual numbers?

16:9 means the width is 16 units for every 9 units of height, a decimal value of about 1.778. Common pixel resolutions that match it include 1280×720, 1920×1080, 2560×1440, and 3840×2160.

Is the CSS aspect-ratio property widely supported?

Yes. The aspect-ratio property is supported across all current versions of Chrome, Edge, Firefox, and Safari, making it safe for production. Only legacy browsers need the older padding-top percentage fallback.

How do I keep the same ratio when resizing?

Change one dimension and recalculate the other using the ratio. To find the new height, multiply the new width by the original height divided by the original width. The calculator does this automatically when you lock the ratio and edit a single field.

What is the difference between aspect ratio and resolution?

Resolution is the exact pixel count, such as 1920×1080, while aspect ratio is the simplified shape, such as 16:9. Many different resolutions can share the same aspect ratio, but resolution also tells you how detailed the image is.

Does a bigger resolution mean a different aspect ratio?

Not necessarily. 1280×720 and 3840×2160 are very different resolutions but both reduce to 16:9, so they share an identical shape. The ratio only changes when the proportion between width and height changes.

Is this aspect ratio calculator free and private?

Yes. The tool is completely free with no signup, and every calculation runs locally in your browser. Your width and height values are never uploaded or stored on a server, so your data stays on your device.

What is the most common aspect ratio?

For screens and video, 16:9 is by far the most common aspect ratio. It is the standard for HD and 4K video, YouTube, televisions, and the majority of monitors and laptops, which is why so many resolutions — from 1280×720 up to 3840×2160 — all share it.

What aspect ratio is best for social media?

It depends on the placement. Square 1:1 (1080×1080) is the safe default for feed posts, vertical 9:16 (1080×1920) fits full-screen Stories, Reels, and TikTok, and 4:5 (1080×1350) gives portrait feed posts the most screen real estate without being cropped.

What aspect ratio is 1920×1080?

A 1920×1080 frame has a 16:9 aspect ratio. Dividing both numbers by their greatest common divisor of 120 gives 16:9, a decimal value of about 1.778 — the standard Full HD widescreen shape.

Related design tools & guides

• Fluid Type Clamp Calculator — generate responsive clamp() font sizes.
• Box Shadow Generator — build and copy CSS box shadows visually.
• Image Converter — convert images between formats in your browser.
• All design tools — browse the full set of free, client-side utilities.