CSS / Reference / aspect-ratio: Preferred Ratios, Natural Images, and Constraints
aspect-ratio supplies a preferred width-to-height ratio used in automatic sizing. Setting both dimensions explicitly, or other min/max and layout constraints, can take precedence over that preferred ratio.
Syntax and value choices
| Property | Initial value | Inherited | Main application conditions |
|---|---|---|---|
aspect-ratio |
auto | No | Most sizing boxes; excludes ordinary inline and internal table boxes |
Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.
.video { width: 100%; aspect-ratio: 16 / 9; }
.square { width: 240px; aspect-ratio: 1; }
| Value or category | Behavior and choice |
|---|---|
auto |
Use no specified ratio; a replaced element may have a natural ratio. |
16 / 9 |
Prefer a width-to-height ratio of 16 to 9. |
1 |
Prefer a square. |
auto 16 / 9 |
Use a natural replaced-element ratio when available; otherwise use the specified ratio. |
For supported values and conditions, see MDN aspect-ratio.
Run the example and compare results
Save this complete code as css-reference-13776-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aspect-ratio comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: auto; background: #bfe3ff; }
.target { aspect-ratio: 16 / 9; }
.reference { aspect-ratio: 1; }
</style>
</head>
<body>
<main id="demo">
<h1>aspect-ratio comparison</h1>
<section class="samples"><div class="a"><p class="label">16 / 9</p><div class="target"></div></div><div class="b"><p class="label">1</p><div class="reference"></div></div></section>
</main>
</body>
</html>
At 240px width, the 16:9 box is 135px high and the square is 240px high. An auto height can change with the width.
A preference rather than a locked size
Width, height, min/max limits, content minimums, and flex or grid constraints influence the final box. A ratio declaration does not rewrite two fixed dimensions to force a match.
Image boxes versus image content
Object-fit determines how an image is placed inside its box: cover can crop and contain can leave space. Natural HTML dimensions and a CSS preferred ratio have different roles. Keep loading placeholders and the final image behavior intentional.
Intrinsic image ratios and preferred CSS ratios
Save this complete document as css-reference-13776-practice.html in UTF-8 and open it in a browser. Test it as a separate file rather than nesting it inside another example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intrinsic image ratios and preferred CSS ratios</title>
<style>
body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
main { max-width: 52rem; margin: auto; }
h1 { font-size: 1.35rem; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.samples > * { max-width: 100%; min-width: 0; }
:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.sample {width:240px;max-width:100%;background:#e6f2ff;border:0;} img {display:block;height:auto;} .auto {aspect-ratio:auto 16 / 9;} .crop {aspect-ratio:16 / 9;height:auto;object-fit:cover;} .contain {object-fit:contain;}
</style>
</head>
<body>
<main>
<h1>Intrinsic image ratios and preferred CSS ratios</h1>
<p>Ordinary div: auto 16 / 9</p><div class="sample auto"></div><p>Intrinsic 2:1 image: auto 16 / 9</p><img class="sample auto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23006c9c'/%3E%3Ccircle cx='20' cy='20' r='12' fill='%23ffd166'/%3E%3C/svg%3E" alt="Blue 80 by 40 illustration"><p>16 / 9 + cover</p><img class="sample crop" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23006c9c'/%3E%3Ccircle cx='20' cy='20' r='12' fill='%23ffd166'/%3E%3C/svg%3E" alt="Illustration cropped into a 16:9 box"><p>16 / 9 + contain</p><img class="sample crop contain" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23006c9c'/%3E%3Ccircle cx='20' cy='20' r='12' fill='%23ffd166'/%3E%3C/svg%3E" alt="Complete 2:1 illustration">
</main>
</body>
</html>
At 240px wide, the ordinary div is 135px tall; the loaded 2:1 image is 120px because auto uses its natural ratio. Without auto, the 16/9 image box is 135px: cover crops and contain leaves space. Change only .sample width to 200px, inspect proportional changes, and restore it. A preferred ratio does not forcibly override two definite dimensions.
In the separate ratio example, adding height:100px to .sample makes both dimensions definite at 240×100px; the preferred ratio does not override them. Restore it, then add only min-height:160px to observe the minimum constraint exceeding 135px. Test each constraint separately and remove it to restore the original.
For responsive image sizing and ratios, see Responsive Images and Video: aspect-ratio and object-fit. Related properties to compare alongside these conditions are box-sizing.
When the result is missing or unexpected
- Inspect height:auto and min/max constraints when the ratio appears wrong.
- Inspect object-fit and the box dimensions if a photo is distorted.
CSS / Reference / border-width: Side Widths, Shorthand Order, and Box Size
Set border widths using valid lengths and shorthand ordering. Inspect none, box-sizing, and hover changes without treating keyword widths as fixed pixels.
CSS / Reference / box-sizing: Content and Border Boxes, Including Small-Size Limits
Calculate content-box and border-box sizes, including margins and the minimum content-size limit. Apply resets deliberately and check external components.
CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing
Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.
CSS / Reference / font-variant: Small Capitals and Font Features
Use small capitals without changing the source string and choose specific variant longhands. Compare real font support with synthesized presentation.
CSS / Reference / overflow: Visible Overflow, Scrolling, Hidden, and Clip
Choose clipping and scrolling behavior with appropriate size constraints. Compare hidden with clip and inspect axis interactions and flex minimum sizes.
CSS / Reference / background-origin: Positioning References Versus Painting Boundaries
Choose a background image’s positioning box and distinguish it from background-clip. Compare how padding, borders, percentage sizes, and fixed attachment affect the reference.
CSS / Reference / background-color: Background Alpha, Inheritance, and Contrast
Set a background or a partly transparent color without fading the text. Distinguish transparency from inheritance and provide readable image fallbacks.
CSS / Reference / font-weight: Numeric Weights, Relative Weights, and Font Matching
Request numeric or relative font weights and inspect the supplied faces. Compare static and variable-font behavior without assuming every number produces a unique weight.
CSS / Reference / quotes: Choose Nested Quotation Marks
Choose generated quotation pairs for nested text and distinguish them from literal punctuation. Compare automatic marks, none, and quotation-depth operations.
CSS / Reference / border-style: Border Patterns, Side Order, and Hidden Conflicts
Choose border patterns for each side and inspect shorthand resets. Compare none with hidden in collapsed tables and account for zero computed border widths.