# CSS Aspect Ratio Calculator

URL: https://speedycalculator.com/calculators/other/css-aspect-ratio/
Last updated: 2026-10-30

> The CSS aspect ratio calculator turns a ratio such as 16:9 and an element width into the matching height, the CSS aspect-ratio declaration, the legacy padding-top percentage and ready-to-copy CSS and image markup for responsive layouts.

## Inputs

- Aspect ratio
- Ratio width
- Ratio height
- Element width (px)

## Results

- Height
- CSS declaration
- Padding-top for the legacy padding hack
- Height of a full-width element
- Ratio as a decimal (width ÷ height)
- CSS to copy
- Image tag with width and height

## Formula

```
height = width × ratio height ÷ ratio width · padding-top = ratio height ÷ ratio width × 100% · CSS: aspect-ratio: w / h
```

## Explanation

Responsive web pages need boxes – video embeds, image placeholders, cards, maps – that keep their shape as the screen width changes. Modern CSS does this with one property: aspect-ratio: 16 / 9 makes an element's height follow its width automatically. It has been supported in all major browsers since 2021 and also stops layout shift when images load.

Before that property existed, developers used the "padding hack": a wrapper with height 0 and padding-top set to a percentage, because vertical padding percentages are measured against the element's width. For 16:9 that percentage is 9 ÷ 16 = 56.25%, for 4:3 it is 75%. You will still meet it in older code and email templates, so the calculator outputs both.

Giving images width and height attributes in the HTML lets the browser compute the aspect ratio before the file arrives, which avoids content jumping around – a Core Web Vitals metric called Cumulative Layout Shift. Enter the ratio and the width your design uses to get the exact height and code.

### How to use the CSS Aspect Ratio Calculator

- **Aspect ratio**
- **Ratio width**
- **Ratio height**
- **Element width (px)**

Everything is calculated in your browser, so results appear instantly and nothing you type is sent to a server.

### How it works

The height is the width multiplied by the ratio's height over its width; the same fraction × 100 gives the padding-top percentage and the height in vw for a full-width element. The CSS snippet uses the ratio exactly as entered.

### Worked example

An 800 px wide video container at 16:9 needs a height of 800 × 9 ÷ 16 = 450 px. The CSS is aspect-ratio: 16 / 9; and the legacy wrapper uses padding-top: 56.25%. A full-width hero banner at 21:9 is 9 ÷ 21 × 100 = 42.857vw tall.

### Padding-top percentages

Ratiopadding-topHeight at 1200 px1:1100%1200 px4:375%900 px3:266.667%800 px16:1062.5%750 px16:956.25%675 px21:942.857%514.3 px9:16177.778%2133.3 px

## Worked example

Inputs — Aspect ratio: 16:9 – video, HD, 4K; Element width (px): 800.

Results — **Height = 450 px**; CSS declaration = aspect-ratio: 16 / 9;; Padding-top for the legacy padding hack = 56.25 %; Height of a full-width element = 56.25 vw; Ratio as a decimal (width ÷ height) = 1.7778; CSS to copy = .ratio-box {
width: 100%;
aspect-ratio: 16 / 9;
}

/* fallback for very old browsers (padding hack) */
.ratio-box--legacy {
position: relative;
height: 0;
padding-top: 56.25%;
}
.ratio-box--legacy > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}.

## Key terms

- **aspect-ratio**: CSS property that sets a preferred width-to-height ratio for a box.
- **Padding hack**: Using percentage padding (relative to width) to fix a box's shape.
- **Cumulative Layout Shift (CLS)**: A Core Web Vitals score measuring how much content jumps while a page loads.

## FAQ

**How do I set an aspect ratio in CSS?**
Use aspect-ratio: 16 / 9; on the element and give it a width (for example width: 100%). The height is calculated automatically.

**What padding-top gives 16:9?**
56.25% (9 ÷ 16). 4:3 is 75%, 21:9 is 42.857% and 1:1 is 100%.

**Is aspect-ratio supported in all browsers?**
Yes – Chrome, Edge and Firefox since 2021 and Safari since version 15.

**Why add width and height attributes to images?**
The browser derives the aspect ratio from them and reserves space before the image loads, preventing layout shift.

**What happens if content is taller than the ratio allows?**
With aspect-ratio the box grows to fit the content unless you set min-height: 0 or overflow: hidden.

**How do I make a responsive 16:9 YouTube embed?**
Give the iframe width: 100%; height: auto; aspect-ratio: 16 / 9.


## Sources

- [MDN Web Docs – aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
- [W3C – CSS Box Sizing Module Level 4](https://www.w3.org/TR/css-sizing-4/#aspect-ratio)
- [web.dev – Cumulative Layout Shift](https://web.dev/articles/cls)