Aspect Ratio Calculator
Work out the missing dimension at a given ratio, see the ratio reduced to its smallest terms, and copy the CSS that holds it at any width.
Enable JavaScript to change the ratio; the CSS below is for the defaults.
Either the ratio itself, such as 16, or a real width such as 1920. It is reduced either way.
Used when working out the height.
Used when working out the width.
.your-element {
aspect-ratio: 16 / 9;
width: 100%;
}
/* 1200 x 675 at this ratio. Only one dimension is needed:
aspect-ratio works out the other, at any width. */Work out the side you do not have, see the ratio in its smallest terms, and take the CSS that keeps it at every width.
How to use
- Enter the ratio. Either the terms themselves,
16and9, or a real size like1920and1080: both reduce to the same ratio. - Choose which side to work out, then type the one you know.
- Read the reduced ratio. 2560 by 1080 is
64 / 27, which is worth knowing before you write it as “21:9”. - Copy the CSS. It sets
aspect-ratioand a width, and lets the browser work out the height at any size, which is the whole point of the property.
Example
1200 wide at 16 / 9 is 675 tall, and the CSS that holds it is:
.your-element {
aspect-ratio: 16 / 9;
width: 100%;
}No height, and no padding trick. The element is 100% wide, whatever that turns out to be, and the browser makes it nine sixteenths as tall.
Pitfalls
- The old padding-top percentage hack is no longer needed.
aspect-ratiohas been supported everywhere since 2021, and it does not need a wrapper or absolute positioning. aspect-ratiogives way to content. An element with more content than the ratio allows grows taller unless you addoverflow: hiddenor amin-heightof zero.- It also gives way to an explicit height. Setting both
heightandaspect-ratiomeans the ratio is ignored, which is usually a leftover from the version before. - On an
img,widthandheightattributes already give the browser a ratio, and that is what stops the layout jumping while the image loads. Keep them even when the CSS sets the ratio. - 21:9 is marketing. Real ultrawide panels are 2560 by 1080, which is 64 / 27, and 3440 by 1440, which is 43 / 18.
- 1.618 is not a nice ratio in whole terms. Reduced it is 809 / 500, which is why golden-ratio layouts are usually written as a decimal.
- A ratio is not a size. Two elements at 16 / 9 can be any size at all and still match; that is the property worth relying on.
- Rounding a solved side to a whole pixel changes the ratio very slightly. Browsers lay out in fractions, so let them.
Compatibility
aspect-ratio is supported in Chrome 88, Safari 15, Firefox 89 and Edge 88, which covers everything in use. For older browsers the padding-top percentage trick still works: the padding is a percentage of the parent’s width, which is what made it possible. The arithmetic here is exact: ratios are reduced with a greatest common divisor, and the missing side is solved from the reduced terms rather than a rounded decimal, so 1200 at 16 / 9 gives exactly 675.
Frequently asked questions
What is 16:9 as a decimal?
Why does my element ignore the ratio?
height, a stretching flex or grid parent, or content taller than the ratio allows.Is padding-top still needed?
What ratio should a video be?
How do I crop an image to a ratio?
object-fit: cover, which fills the box and clips the overflow rather than distorting it.