// generate aspect-ratio css from any dimension pair
Generate correct aspect-ratio CSS declarations from width/height pairs or common ratios like 16:9, 4:3, and 1:1. Free browser-based tool.
Ready to generate
Pick a preset or enter dimensions, then click Generate CSSChoose from 12 common ratios like 16:9 or type your own width and height values.
Toggle GCD simplification, padding-top fallback, and container snippet as needed.
Click "Generate CSS" to get the declarations, then copy individual blocks or all at once.
The CSS aspect-ratio property lets you define the ratio of an element's width to its height. This tool calculates and formats the correct CSS declaration from any width/height pair, including a legacy padding-top percentage fallback for older browsers.
The aspect-ratio CSS property sets the preferred aspect ratio for an element's box. It accepts two numbers separated by a slash (e.g. aspect-ratio: 16 / 9). Browsers use this to determine the element's dimensions automatically when only one axis is constrained.
The aspect-ratio property is supported in all modern browsers since 2021, but Safari 14 and earlier versions of Chrome/Firefox do not support it. The padding-top trick (setting padding-top to a percentage equal to height/width × 100%) achieves the same result and works in all browsers.
GCD (Greatest Common Divisor) simplification reduces a ratio to its simplest form. For example, 1920×1080 simplifies to 16:9 because both numbers are divisible by 120. Simplified ratios produce cleaner CSS like aspect-ratio: 16 / 9 rather than aspect-ratio: 1920 / 1080.
Yes. The aspect-ratio property works on any CSS box: div, img, video, iframe, flex items, grid items, and replaced elements. For img and video tags, the browser will use the intrinsic ratio by default if not overridden.
The formula is (height / width) × 100%. For a 16:9 ratio: (9 / 16) × 100 = 56.25%. You set this as padding-top: 56.25% on a container with position: relative, then absolutely position the child content inside it. This exploits how percentage padding is always relative to the parent's width.
Yes. When an element with aspect-ratio is a flex or grid item, the browser respects the ratio while the layout algorithm determines size. You may need to also set min-width: 0 or min-height: 0 on flex children to prevent overflow in some cases.
The simplest modern approach: .video-wrap { aspect-ratio: 16 / 9; width: 100%; } and place your iframe or video inside with width: 100%; height: 100%;. This replaces the old intrinsic ratio container technique entirely.
Absolutely. aspect-ratio defines a preferred ratio, not a rigid one. You can pair it with max-width, min-height, or clamp values. The browser resolves conflicts by respecting the min/max constraints first, then applying the ratio to the remaining free dimension.
A CSS Aspect Ratio Calculator is a developer utility that generates correct aspect-ratio CSS declarations from a pair of width and height values. Instead of manually computing ratios, simplifying fractions, and formatting declarations, this tool does it in one click — outputting clean, copy-ready CSS you can paste directly into your stylesheet.
The tool also handles the GCD (Greatest Common Divisor) reduction that converts raw dimensions like 1920 / 1080 into their canonical simplified form 16 / 9, and it generates the legacy padding-top percentage fallback for browsers that predate aspect-ratio support.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
Introduced in Chrome 88, Firefox 89, and Safari 15, the aspect-ratio CSS property tells the browser to maintain a fixed width-to-height relationship for an element. Its syntax is straightforward:
.element {
aspect-ratio: 16 / 9;
}When only one dimension is constrained (e.g. width: 100%), the browser calculates the other dimension automatically to preserve the declared ratio. This eliminates the need for JavaScript-based dimension calculations and the old padding hack in many use cases.
The property accepts two positive numbers — a ratio of width to height. The numbers do not need to be integers; aspect-ratio: 1.78 / 1 is valid and equivalent to 16:9. However, integer pairs are cleaner and more readable.
When you enter pixel dimensions like 1280×720, you want the CSS declaration to read aspect-ratio: 16 / 9 — not aspect-ratio: 1280 / 720. Both are mathematically equivalent, but the simplified form is standard, readable, and easier to maintain.
Simplification works by finding the Greatest Common Divisor of the two numbers. For 1280 and 720, the GCD is 80. Dividing both by 80 gives 16 and 9. The algorithm this tool uses is Euclid's algorithm, one of the oldest mathematical algorithms in history and still optimal for this purpose.
Some aspect ratios are already in simplest form — like 21:9 (though this is actually a marketing label; true 21:9 cinema is 2.39:1, while most "21:9" monitors are actually 64:27). The tool handles all of these correctly.
Before aspect-ratio existed, developers used a clever CSS hack involving percentage padding. In CSS, percentage values for padding-top and padding-bottom are always calculated relative to the width of the containing block — not the height. This quirk enables the intrinsic ratio container pattern:
.ratio-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9/16 × 100 = 56.25% for 16:9 */
height: 0;
overflow: hidden;
}
.ratio-container > * {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}The formula for padding-top percentage is: (height ÷ width) × 100. For a 16:9 ratio: (9 ÷ 16) × 100 = 56.25%. For 4:3: (3 ÷ 4) × 100 = 75%. For 1:1: (1 ÷ 1) × 100 = 100%.
This technique works in every browser ever made and is still useful for supporting older environments. Our tool generates both the modern aspect-ratio declaration and the legacy padding-top percentage so you can use whichever approach fits your browser support requirements.
The most powerful application of aspect-ratio is in fluid, responsive layouts. Consider a grid of image cards that must maintain a consistent ratio as the grid resizes:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.card-image {
aspect-ratio: 3 / 2;
width: 100%;
object-fit: cover;
border-radius: 8px;
}In this pattern, each card image automatically scales to maintain the 3:2 ratio regardless of its computed width. Previously this required either fixed heights (breaking responsiveness) or JavaScript that recalculated heights on resize. The CSS property eliminates both workarounds entirely.
HTML img and video elements can carry width and height attributes that inform the browser of the intrinsic dimensions before the resource loads. Modern browsers use these to reserve layout space and prevent Cumulative Layout Shift (CLS). However, these attributes alone don't make an image responsive.
The recommended pattern is to use both: set the HTML attributes for CLS prevention, then override with CSS for responsive behavior:
/* HTML */
<img src="photo.jpg" width="1200" height="800" alt="...">
/* CSS — maintains 3:2 ratio, fills container width */
img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2; /* optional — browser infers from attributes */
}When width and height attributes are present, the browser automatically infers the aspect ratio from them — the CSS declaration becomes optional but can be useful for clarity or when overriding the intrinsic ratio.
As of 2024, aspect-ratio has over 95% global browser coverage. It is safe to use without fallbacks for most production projects. The main scenarios where fallbacks remain relevant are enterprise applications targeting legacy Internet Explorer, certain older mobile WebViews, or very conservative browser support matrices.
For projects that still need IE11 support (a shrinking but real requirement in enterprise), the padding-top technique remains the only pure-CSS solution. Our tool generates this fallback automatically alongside the modern declaration, wrapped in a comment so you can decide whether to include it.
For images and videos, aspect-ratio works hand-in-hand with object-fit to control how the media content fills or fits within the constrained box:
.hero-image {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover; /* fill box, crop excess */
object-position: center; /* anchor the crop point */
}object-fit: cover scales the image to fill the box while maintaining its intrinsic proportions — cropping whatever overflows. object-fit: contain letterboxes instead. This combination replaces complex background-image positioning hacks that were previously needed for responsive media with fixed ratios.