:

Common Aspect Ratios

Calculated Padding (%)

--

Generated CSS

Live Preview


The Ratio Padding Calculator helps you create responsive containers using the CSS padding hack. By setting a percentage-based padding, you can maintain a fixed aspect ratio for videos, images, or any embedded content, regardless of the screen size.

What is Ratio Padding?

Ratio padding is a CSS technique used to maintain a specific aspect ratio in a responsive layout. Instead of using fixed heights, you set the container’s height: 0 and apply padding-top or padding-bottom with a percentage value. This percentage is calculated based on the ratio of height to width.

Formula

To calculate the padding percentage, use:

Padding (%) = (Height ÷ Width) × 100

Examples

  • 16:9 ratio → (9 ÷ 16) × 100 = 56.25%
  • 4:3 ratio → (3 ÷ 4) × 100 = 75%
  • 1:1 ratio → (1 ÷ 1) × 100 = 100%
  • 21:9 ratio → (9 ÷ 21) × 100 ≈ 42.857%

Generated CSS Example

.aspect-ratio-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 42.8571%; /* Example: 21:9 ratio */
}

.aspect-ratio-box__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Use Cases

  • Embedding YouTube or Vimeo videos
  • Responsive image containers
  • Maintaining design consistency across devices
  • Creating flexible cards and previews

Why Use a Ratio Padding Calculator?

Calculating padding manually can be time-consuming. This calculator instantly gives you the exact padding percentage for any aspect ratio you enter. It also generates ready-to-use CSS so you can copy and paste directly into your project.

Tips

  • Always use position: absolute for the content inside the ratio box.
  • Use width: 100% to make the container fully responsive.
  • Keep the aspect ratio consistent for video players and images to avoid layout shifts.

FAQs

What is the ratio padding hack? It is a CSS trick that uses percentage padding to maintain a fixed aspect ratio in a responsive container.

How do I calculate padding for any ratio? Divide the height by the width, then multiply by 100.

Can I use this for both vertical and horizontal ratios? Yes. Just plug in the width and height values, and the calculator gives you the correct padding.

Is this method mobile-friendly? Yes, the container adjusts automatically on all screen sizes.

Does this work without JavaScript? Yes. The CSS padding hack is pure CSS and does not require JavaScript.