CSS Aspect Ratio Calculator

Calculate and generate CSS aspect-ratio property values with live preview. Enter custom dimensions, use preset ratios, simplify with GCD, and copy production-ready CSS. Everything runs in your browser.

16 : 9 1.778
Live Preview
Preset Ratios
Custom Ratio
:
Simplified 16 : 9
Common Resolutions
Dimension Calculator
px
1080 px
px
1920 px

How to Use the CSS aspect-ratio Property

The CSS aspect-ratio property sets a preferred aspect ratio for an element's box, which the browser uses to calculate auto-sized dimensions. It was introduced as a modern replacement for the padding-top percentage hack that developers previously used to create responsive containers with fixed proportions.

Basic Syntax

The property accepts a ratio value written as width / height. For example, aspect-ratio: 16 / 9 creates a widescreen container. If you set the width, the browser calculates the height automatically (and vice versa). You can also use a single number: aspect-ratio: 1.778 is equivalent to 16 / 9.

Common Use Cases

GCD Simplification

This tool automatically simplifies ratios using the Greatest Common Divisor (GCD) algorithm. For instance, entering 1920 x 1080 simplifies to 16:9, and 2560 x 1440 simplifies to 16:9 as well. This makes the CSS cleaner and more readable while producing the exact same visual result.

Browser Support

The aspect-ratio property is supported in all modern browsers: Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+. This gives it over 95% global browser coverage. For older browsers, you can use the @supports rule to provide a padding-top fallback.

Features

Related Tools

CSS Grid Generator

Visual CSS Grid layout builder with live preview

Flexbox Generator

Visual CSS Flexbox layout generator

Image Resizer

Resize images to exact dimensions

CSS Units Converter

Convert between px, rem, em, vw, and more
Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/css-aspect-ratio" width="100%" height="800" frameborder="0"></iframe>

Frequently Asked Questions

What is the CSS aspect-ratio property?▼
The CSS aspect-ratio property sets a preferred aspect ratio for an element, which is used to calculate auto sizes. You write it as aspect-ratio: width / height, for example aspect-ratio: 16 / 9 for widescreen content. The browser automatically calculates the missing dimension (width or height) to maintain the specified ratio. It works on any element and replaces the old padding-top percentage hack for responsive aspect ratios. It is supported in all modern browsers including Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+.
How do I make a responsive element with a fixed aspect ratio in CSS?▼
The modern way is to use the aspect-ratio CSS property. Set the element width to a flexible value like 100% or a viewport unit, then add aspect-ratio: 16 / 9 (or your desired ratio). The browser automatically calculates the height to maintain that ratio as the element resizes. For example: .video-container { width: 100%; aspect-ratio: 16 / 9; } This replaces the older padding-top hack where you would set padding-top to a percentage (like 56.25% for 16:9). The aspect-ratio property is cleaner, more readable, and works with min-height and max-height constraints.
What are the most common aspect ratios used in web design?▼
The most common aspect ratios in web design are: 16:9 (widescreen, standard for video and YouTube embeds), 4:3 (traditional TV and older monitors), 1:1 (square, popular for social media thumbnails and profile images), 3:2 (common for photography and DSLR images), 21:9 (ultrawide cinema format), 9:16 (vertical mobile video like Instagram Stories and TikTok), and the golden ratio 1.618:1 (used in design for aesthetically pleasing proportions). For responsive images, you can use the aspect-ratio property together with object-fit: cover to maintain the ratio while filling the container.
Keyboard Shortcuts
Ctrl+Shift+C Copy CSS
Ctrl+L Reset all