Related Tools

View all 103 →
Gradient Builder
Try free →
Shadow Generator
Try free →
Border Radius Lab
Try free →
Glassmorphism
Try free →
Palette Generator
Try free →
Contrast Checker
Try free →

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

  1. 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).
  2. 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.
  3. Preview the result — See your aspect-ratio box rendered live with the correct proportions applied.
  4. Copy the CSS — Grab the modern aspect-ratio property or the legacy padding-bottom hack for older browser support.

Tips and Best Practices

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.

📖 Learn More

Related Article How to Set CSS Aspect Ratio for Responsive Elements →

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service