Padding Results
The calculator determines the padding needed to maintain an aspect ratio within a container:
This ensures your content maintains its proportions when the container resizes.
The Ratio Padding Calculator is a simple tool used to maintain a fixed aspect ratio for elements using CSS. It’s especially useful when designing responsive containers, videos, or image boxes that need to stay proportionate on any screen size.
Why Use Ratio Padding?
In modern responsive web design, we often use padding as a percentage to create elements that scale properly. By using a calculated padding-top or padding-bottom value, you can keep an element's aspect ratio intact no matter the screen width.
How It Works
The formula is based on the aspect ratio you want to maintain. Here’s how it's calculated:
Padding (%) = (Height ÷ Width) × 100
For a 16:9 video container:
Height = 9, Width = 16
Padding = (9 ÷ 16) × 100 = 56.25%
Apply this as
padding-bottom: 56.25%; in your CSS.
Common Aspect Ratios
- 16:9 → 56.25%
- 4:3 → 75%
- 1:1 → 100%
- 3:2 → 66.66%
- 21:9 → 42.85%
Where to Use Ratio Padding
- Responsive video containers (like embedded YouTube or Vimeo)
- Image holders or sliders
- Cards or content boxes
- Grids or galleries
How to Implement in CSS
Wrap your content in a parent with a position: relative; and set the calculated padding-bottom. Then, place the content inside with position: absolute;.
Conclusion
Our Ratio Padding Calculator saves you time by giving you the correct percentage padding for any width-to-height ratio. Whether you're working on videos, images, or custom content blocks, this tool helps you keep your design looking sharp and responsive.