CSS Aspect Ratio Calculator
Use this CSS aspect ratio calculator when you need a responsive box, image wrapper, video embed or card layout to keep its shape across screen sizes. Enter a ratio or pixel dimensions, then generate a modern CSS aspect-ratio value and, where needed, a percentage padding fallback.
CSS aspect ratio calculator
aspect-ratio: 16 / 9;
padding-bottom: 56.25%;
Common CSS ratios
| Size / ratio | Label | Use-case |
|---|---|---|
| 16 / 9 | 56.25% padding | Responsive video embeds, hero media |
| 1 / 1 | 100% padding | Square cards and avatars |
| 4 / 5 | 125% padding | Portrait social previews |
| 3 / 2 | 66.6667% padding | Photography cards |
| 21 / 9 | 42.8571% padding | Ultrawide hero sections |
CSS formulas
Modern CSS: aspect-ratio: width / height;Padding fallback: padding-bottom = height ÷ width × 100%;Example 16:9: 9 ÷ 16 × 100 = 56.25%.
Modern CSS vs padding fallback
For modern layouts, CSS has a native aspect-ratio property. A 16:9 box can be written as aspect-ratio: 16 / 9;, which is easier and clearer than older padding hacks. This is useful for videos, image placeholders, product cards and responsive embeds.
The older padding-bottom technique still matters when supporting legacy code or when a project already uses intrinsic-ratio wrappers. In that method, the percentage is based on height divided by width. RatioForge can turn a visual ratio into both forms so designers and developers speak the same language.
This page targets developers, not general social-media users. A design ratio can become either aspect-ratio: 16 / 9; or an older intrinsic-ratio padding value — useful for responsive video embeds, image placeholders, product cards, hero sections and skeleton layouts where the browser must reserve space before media loads.
The calculator above outputs copyable CSS for both approaches. Useful examples include 16:9 video wrappers, 1:1 avatar boxes, 4:5 card previews and 21:9 hero banners. For non-code sizing use the main aspect ratio calculator; if you start from pixel dimensions, the image aspect ratio calculator finds the ratio first.
Frequently asked questions
Related calculators and guides
- Aspect ratio calculator — the main calculator with custom ratios
- 16:9 aspect ratio calculator — the most common CSS video ratio
- Image aspect ratio calculator — start from pixel dimensions
- How to calculate an aspect ratio — the math, step by step
- Aspect ratio vs. resolution — shape versus pixels