What Is the CSS Aspect Ratio Calculator?
Calculate and generate CSS aspect-ratio property values. Preview how different ratios (16:9, 4:3, 1:1, 21:9) affect element dimensions.
Why Use This Tool?
The CSS aspect-ratio property replaces the old padding-top percentage hack for maintaining element proportions. This tool helps you find the right ratio and generates the CSS.
How to Use This CSS Aspect Ratio
- Enter your desired ratio — Type the aspect ratio you need — common values include 16/9 (widescreen), 4/3 (traditional), 1/1 (square), and 21/9 (ultrawide).
- Set the element width — Define the width of your element in any CSS unit (px, %, vw). The height will be calculated automatically based on the ratio.
- Preview the result — See your aspect-ratio box rendered live with the correct proportions applied.
- Copy the CSS — Grab the modern
aspect-ratio property or the legacy padding-bottom hack for older browser support.
Worked example: common ratios, both ways
The legacy padding trick works because vertical padding percentages are calculated from the element's width, so padding-top = height ÷ width × 100%. The native property needs no arithmetic. For each ratio, here is the modern declaration, the old percentage and the height a 360 px wide box gets:
| Ratio | Modern CSS | Legacy padding-top | Height at 360 px wide |
|---|
| 16:9 | aspect-ratio: 16 / 9 | 56.25% | 202.5 px |
| 4:3 | aspect-ratio: 4 / 3 | 75% | 270 px |
| 3:2 | aspect-ratio: 3 / 2 | 66.67% | 240 px |
| 21:9 | aspect-ratio: 21 / 9 | 42.86% | 154.3 px |
| 9:16 | aspect-ratio: 9 / 16 | 177.8% | 640 px |
| 1:1 | aspect-ratio: 1 / 1 | 100% | 360 px |
aspect-ratio shipped in Chrome 88, Firefox 89 and Safari 15, all in 2021, so the padding version is only needed for browsers older than that. Two behaviours to know: if an element has both a width and a height set, the ratio is ignored; and on images, writing aspect-ratio: auto 16 / 9 uses 16:9 as a placeholder until the file loads, then the image's real ratio, which reserves space and avoids layout shift.
Sources, checked October 11, 2026: W3C CSS Box Sizing Level 4, aspect-ratio; MDN, aspect-ratio (browser compatibility data).
Frequently Asked Questions
Do I still need the padding-top hack?
For modern browsers, no. The aspect-ratio property has excellent support. The padding-top technique is only needed for IE 11 support, which is effectively obsolete.
What ratio should I use for video embeds?
16:9 is standard for most video content. Use 4:3 for older content, 1:1 for square social media videos, and 21:9 for ultrawide cinematic formats.
What is the CSS aspect-ratio property?+
The CSS aspect-ratio property sets a preferred aspect ratio for an element, automatically calculating the missing dimension. For example, aspect-ratio: 16 / 9 on a 400px-wide element makes it 225px tall. It works on any element and is supported in all modern browsers.
What aspect ratio is 16:9?+
16:9 is the standard widescreen ratio used by modern monitors, TVs, and video platforms like YouTube. In CSS, the padding-bottom percentage for 16:9 is 56.25% (9 ÷ 16 × 100).
How do I maintain aspect ratio on responsive images?+
Set width: 100% and aspect-ratio: [ratio] on the image, along with object-fit: cover or contain. This ensures the image fills its container responsively without distortion. Adding explicit width and height attributes in HTML also helps prevent layout shift.
When should I use aspect-ratio versus the old padding-bottom hack?+
Use aspect-ratio in new code. Modern browsers (Chrome 88+, Firefox 89+, Safari 15+) support it natively, the syntax is one line, and it works with any element including iframes, videos, and divs. The padding-bottom hack is only necessary if you support older browsers (Safari 14 and earlier, IE) or need a particular edge case the hack handles differently. The generator can emit either form or both with the modern one as the default and the hack as an @supports fallback.
Can I use aspect-ratio on flex and grid children?+
Yes but with a caveat: when a flex or grid parent sizes a child via flex-grow or grid-area, the parent override can win over the aspect-ratio property. The aspect-ratio is treated as a preferred size and gets overridden by stronger constraints. To enforce the ratio in flex layouts, set the flex-basis to the desired width and use aspect-ratio for the height. In grid, place the element in a track sized to the desired width.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service