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.
Tips and Best Practices
- → Use the native
aspect-ratio property. Modern CSS supports aspect-ratio: 16 / 9 directly — no padding tricks needed. It's supported in all modern browsers since 2021.
- → The padding-bottom trick is legacy. Before
aspect-ratio, developers used padding-bottom: 56.25% for 16:9 ratios. Only use this if you need to support very old browsers.
- → Prevent layout shift with aspect-ratio. Setting aspect-ratio on images and video containers reserves the correct space before content loads, eliminating Cumulative Layout Shift (CLS) — a key Core Web Vital.
- → Combine with object-fit. Use
object-fit: cover with aspect-ratio on images to maintain proportions without distortion while filling the container.
Frequently Asked Questions
What is the CSS aspect-ratio property?
aspect-ratio is a CSS property that sets a preferred aspect ratio for an element. Syntax: aspect-ratio: 16/9 makes an element maintain a 16:9 ratio regardless of its content or container width.
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