Aspect ratio
Set an automatic, named, or arbitrary aspect ratio.
Use aspect-ratio to preserve a frame shape while its width changes, which is useful for media cards, thumbnails, and embeds. The ratio determines the other dimension when that dimension is automatic.
Quick reference
| Example class | Expected declarations |
|---|---|
aspect-video | aspect-ratio: 16 / 9; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-3/2 | aspect-ratio: 3 / 2; |
aspect-auto | aspect-ratio: auto; |
aspect-4/3 | aspect-ratio: 4 / 3; |
Example setup
Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.
Examples in use
Compare common ratios
The wide frame uses 16:9, the square frame uses 1:1, and aspect-3/2 creates a wider-than-tall rectangle.
Compare common ratios
HTML
<div class="wind-demo">
<p class="wind-demo-note">The ratio determines height from width when height is automatic.</p>
<div class="wind-demo-frame w-72">
<div class="wind-demo-art aspect-video w-full">aspect-video 16:9</div>
<div class="wind-demo-art aspect-square w-24">aspect-square</div>
<div class="wind-demo-art aspect-3/2 w-48">aspect-3/2</div>
</div>
</div>CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-spacing-unit: .25rem;
}
}
.wind-demo {
font: 14px / 1.45 system-ui, sans-serif;
color: #203046;
}
.wind-demo-art {
border: 1px solid #849bb3;
background: linear-gradient(135deg, #dce8f2, #9bb5cc);
color: #203046;
text-align: center;
}
.wind-demo-frame {
border: 1px solid #9aaabd;
background: #f8fafc;
padding: .75rem;
}
.wind-demo-note {
color: #53677f;
font-size: .875rem;
}
.w-24 {
width: 6rem;
}
.w-48 {
width: 12rem;
}
.w-72 {
width: 18rem;
}
.w-full {
width: 100%;
}
.aspect-3\/2 {
aspect-ratio: 3 / 2;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: 16 / 9;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem"
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo": true,
"wind-demo-art": true,
"wind-demo-frame": true,
"wind-demo-note": true
},
"safelist": {
"docs-preview": [
"aspect-3/2",
"aspect-square",
"aspect-video",
"w-24",
"w-48",
"w-72",
"w-full"
]
}
}
}Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-art { border: 1px solid #849bb3; background: linear-gradient(135deg, #dce8f2, #9bb5cc); color: #203046; text-align: center; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }Leave the ratio automatic
aspect-auto lets the explicit h-16 set height; aspect-4/3 derives height from its width.
Leave the ratio automatic
HTML
<div class="wind-demo">
<div class="wind-demo-frame flex items-start gap-2">
<div class="wind-demo-art aspect-auto h-16 w-24">auto: explicit height</div>
<div class="wind-demo-art aspect-4/3 w-24">custom ratio</div>
</div>
</div>CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-spacing-unit: .25rem;
}
}
.wind-demo {
font: 14px / 1.45 system-ui, sans-serif;
color: #203046;
}
.wind-demo-art {
border: 1px solid #849bb3;
background: linear-gradient(135deg, #dce8f2, #9bb5cc);
color: #203046;
text-align: center;
}
.wind-demo-frame {
border: 1px solid #9aaabd;
background: #f8fafc;
padding: .75rem;
}
.flex {
display: flex;
}
.items-start {
align-items: flex-start;
}
.h-16 {
height: 4rem;
}
.w-24 {
width: 6rem;
}
.gap-2 {
column-gap: 0.5rem;
row-gap: 0.5rem;
}
.aspect-4\/3 {
aspect-ratio: 4 / 3;
}
.aspect-auto {
aspect-ratio: auto;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem"
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo": true,
"wind-demo-art": true,
"wind-demo-frame": true
},
"safelist": {
"docs-preview": [
"aspect-4/3",
"aspect-auto",
"flex",
"gap-2",
"h-16",
"items-start",
"w-24"
]
}
}
}Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-art { border: 1px solid #849bb3; background: linear-gradient(135deg, #dce8f2, #9bb5cc); color: #203046; text-align: center; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }Custom and named values
The named values are auto, square (1:1), and video (16:9). Numeric fractions such as aspect-3/2 are supported, as are arbitrary CSS values in brackets. No aspect token is inherited or required. aspect-auto leaves the ratio automatic so another sizing rule or intrinsic content can determine the shape.
Related guides: Utility grammar · Variants
Catalog details
aspect
| Field | Value |
|---|---|
| Catalog identifier | v1.aspect |
| Class pattern | aspect-<suffix> |
| Grammar | {"acceptedKinds":["keyword","fraction","arbitrary"],"arbitraryProperty":"aspect-ratio","allowsFractionSlash":true,"allowsColorOpacity":false} |
| Accepted values | 3 |
| Token categories | No token category |
| Negative-value policy | forbidden |
| Conflict group and rank | aspect (42) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | aspect-ratio |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
keyword | "auto" | "auto" |
keyword | "square" | "1 / 1" |
keyword | "video" | "16 / 9" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
aspect-ratio | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
aspect-16/9 | aspect-ratio: 16 / 9 |
Revision History
CreatedUpdated