Aspect Ratio Calculator

About Aspect ratio calculator

Type a ratio and one dimension, and this tool works out the other, then prints the CSS aspect-ratio line, the older padding-top percentage trick and the decimal value. It suits developers sizing video embeds, thumbnails and responsive image slots.

How to use it

1. Click a preset (16:9, 4:3, 1:1, 21:9, 3:2 or 9:16) or type numbers into the two Ratio boxes.
2. Enter a Width in pixels to have the Height calculated, or enter a Height to have the Width calculated.
3. Read the summary showing the reduced ratio, the Padding-top trick percentage and the Decimal value.
4. Copy the line under Generated CSS.

A 16:9 slot at 1280 wide

Ratio 16:9, width 1280

Height 720
aspect-ratio: 16 / 9;
Padding-top trick: 56.2500%
Decimal: 1.7778

When to use it

• Working out the height of a 16:9 video at a specific pixel width.
• Reserving space for images so the page does not jump while they load.
• Converting an existing width and height pair into a reduced ratio.
• Getting the padding-top percentage for legacy responsive embed wrappers.

Questions about Aspect ratio calculator

Which field is calculated?

Editing Width or the first ratio box calculates Height, and editing Height or the second ratio box calculates Width. The computed field turns read-only until you edit the other one.

Why is my ratio not reduced neatly?

The derived dimension is rounded to a whole pixel, and the shown ratio is reduced from that pair. A width of 1000 at 16:9 gives 563 high and prints 1000 / 563, so pick widths that divide evenly.

What is the padding-top trick?

Before aspect-ratio existed, a wrapper with padding-top equal to height divided by width times 100 percent reserved the right shape. The tool prints that number to four decimals.

What happens with blank or zero values?

Anything that is empty, negative or not a number counts as zero, and the results show a dash until you enter valid numbers.

Related tools

• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included
• Neumorphism generatorBuild soft-UI neumorphic elements with dual box-shadows derived from a single base color
• CSS filter generatorCombine blur, brightness, contrast, hue-rotate, saturate, sepia and more with a live image preview
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element