How this calculator works
The aspect-ratio property tells the browser to keep a box in proportion while one side is free to resize. Writing aspect-ratio: 16 / 9 means the box is always sixteen units wide for every nine units high, so a box that is 960 pixels wide becomes 540 pixels high. Before the property was widely supported, developers reserved the height with padding. A percentage of vertical padding is resolved against the containing block width, not its height, so padding-top: 56.25% on a width-driven box creates a height of 56.25 percent of the width, which is exactly a 16:9 shape. The modern property is simpler and works with replaced elements such as images and video, while the padding fallback still appears in older code bases.
Formula
height = width x ratio height / ratio width. width = height x ratio width / ratio height. padding-top percentage = (ratio height / ratio width) x 100. For 16:9 the padding is 9 / 16 x 100 = 56.25 percent.
Worked example
A 16:9 box that is 960 pixels wide is 960 x 9 / 16 = 540 pixels high, and its fallback padding-top is 9 / 16 x 100 = 56.25 percent. A 4:5 portrait box that is 1080 pixels wide is 1080 x 5 / 4 = 1350 pixels high, with a padding-top of 125 percent. A square box needs a padding-top of 100 percent because its height equals its width.
Advertisement
Frequently asked questions
Why does padding-top use a percentage of the width?
The CSS specification resolves percentage padding against the inline size of the containing block, which is normally the width. That quirk is what makes the padding hack possible: a vertical value can track the width and preserve a shape.
Should I use aspect-ratio or padding-top today?
Use aspect-ratio. It is supported in current versions of every major browser, needs one line instead of a wrapper and a positioned child, and allows content to size the box when the ratio would otherwise conflict. Keep padding-top only for very old browsers or an existing design system.
Why is my box not the expected height?
The box may have a fixed height, a min-height, or content that is larger than the ratio allows. When content overflows, the browser may let the content determine the height unless overflow is hidden. Check those properties before changing the ratio.
Can I use a decimal ratio such as 2.35?
Yes. CSS accepts aspect-ratio: 2.35 / 1, and the calculator treats a custom ratio as any two positive numbers. For a cinemascope shape, 2.35 to 1 is a common way to write it.