How does the aspect-ratio property compare to the padding hack?

aspect-ratio is native: `aspect-ratio: 16 / 9` says exactly what it means and needs no wrapper element. The percentage padding-top technique was the workaround before the property shipped and is no longer necessary in current browsers.

Why did my ratio come out so strange?

Reduction uses the greatest common divisor, so 1920×1080 gives 16:9, but a size like 1921×1080 that shares no useful factor gives a large pair of numbers. That usually means the original dimensions are off by a pixel or two; check the decimal value to see which standard ratio it is nearest to.

CSS / FRONTEND · RUNS IN YOUR BROWSER

Aspect Ratio Calculator

Reduce width and height to a ratio, or solve for the missing side.

Reduces using the greatest common divisor and matches against standard ratios such as 16:9, 4:3, and 1:1.

Mode

Size to ratioRatio to side

Size to ratio

Width

Height

Result

Ratio16:9

Decimal1.7778

Standard ratio16:9

CSS declaration

aspect-ratio

aspect-ratio: 16 / 9;

About this tool

Enter a width and height and you get the reduced ratio, its decimal value, and a ready-to-use `aspect-ratio` declaration; if it happens to match a standard such as 16:9, 4:3, or 21:9, the tool names it. The reverse mode lets you fix a ratio and supply one side to solve for the other, which is what resizing an image or a video container proportionally actually needs.

How it works

Enter the original width and height.
Read the reduced ratio and the aspect-ratio declaration.
To scale proportionally, supply one side and solve for the other.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

How does the aspect-ratio property compare to the padding hack?: aspect-ratio is native: `aspect-ratio: 16 / 9` says exactly what it means and needs no wrapper element. The percentage padding-top technique was the workaround before the property shipped and is no longer necessary in current browsers.
Why did my ratio come out so strange?: Reduction uses the greatest common divisor, so 1920×1080 gives 16:9, but a size like 1921×1080 that shares no useful factor gives a large pair of numbers. That usually means the original dimensions are off by a pixel or two; check the decimal value to see which standard ratio it is nearest to.

← All CSS / Frontend tools