CSS & Responsive Design

Aspect Ratio Padding Calculator

Calculate responsive CSS padding percentages and aspect-ratio values from any width and height.

Enter dimensions

Width

Height

Common presets

Calculated result

Simplified ratio

16:9

Ratio value

1.7778

Padding %

56.2500%

16:9 preview

Modern CSS

aspect-ratio: 16 / 9;

Legacy padding technique

padding-top: 56.2500%;

Responsive aspect-ratio snippet

.responsive-box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Responsive padding fallback

.responsive-box {
  position: relative;
  width: 100%;
  padding-top: 56.2500%;
}

.responsive-box > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

About Aspect Ratio Padding Calculator

Aspect Ratio Padding Calculator converts width and height values into a simplified ratio, a responsive padding percentage, and modern CSS aspect-ratio syntax.

Input is processed locally in your browser and is not sent to Navorika.

How the calculation works

Padding percentage

Responsive padding percentage = height ÷ width × 100.

Aspect ratio

The aspect ratio is width ÷ height and can also be reduced to a simplified width:height pair.

How to use this calculator

1Enter the width and height or choose a common preset such as 16:9 or 4:3.
2Review the simplified aspect ratio and calculated padding percentage.
3Preview the resulting shape.
4Copy modern aspect-ratio CSS or the legacy padding-based fallback.

Understanding the result

A 16:9 ratio produces 56.25% vertical padding when the classic responsive-padding technique is used.

Modern browsers support the CSS aspect-ratio property, which is usually simpler than the older padding technique.

Important limitations

Width and height must both be greater than zero.
The padding technique assumes percentage vertical padding is calculated relative to the containing block width.
The preview illustrates proportions only; final layout still depends on surrounding CSS.

Frequently asked questions

What is the padding percentage for a 16:9 aspect ratio?

56.25%, calculated as 9 ÷ 16 × 100.

Should I use aspect-ratio or padding-top?

Use the CSS aspect-ratio property for modern layouts. The padding technique is mainly useful as a legacy fallback or when maintaining older code.

Can I enter custom dimensions?

Yes. Any positive width and height values can be used.

Does Navorika upload my values?

No. The calculation runs locally in your browser.

Learn more

Related guides

View all guides

SEO Tools Guide: Essential Tools for Better Rankings

Discover essential SEO tools for improving your website rankings. Learn how to use tools for keyword research, analysis, and optimization.

8 min read