aspect-ratio
Derive an automatic dimension from a preferred proportion.
Overview
| Class | Declarations |
|---|---|
square | aspect-ratio: 1/1;
|
video | aspect-ratio: 16/9;
|
aspect-ratio:<ratio>,<aspect> | aspect-ratio: <ratio>,<aspect>;
|
Examples
Set a custom ratio
aspect-ratio:4/3 provides a preferred proportion. With a 240px width and automatic height, this image gets a 180px height. The source is rectangular; object-cover crops it into the requested box.
<div id="layout" class="w:15rem" role="group" aria-label="Available space"> <img id="target" class="block h:auto w:100% aspect-ratio:4/3 object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div>The ratio helps reserve space before media loads. Keep at least one dimension automatic if the ratio should determine that dimension.
Use square and video shortcuts
square sets aspect-ratio:1/1; video sets 16/9. With the same 160px width and automatic height, the boxes are 160 × 160px and 160 × 90px.
<!-- Square · 1:1 --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <img id="target" class="block h:auto w:10rem square object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div><!-- Widescreen · 16:9 --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <img id="target" class="block h:auto w:10rem video object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div>Pair with one explicit axis
An automatic dimension lets the preferred ratio participate in sizing. Compare a 240px-wide 16:9 box, which is 135px tall, with the same ratio and an explicit 80px height. The two definite dimensions win in the second example.
<!-- Automatic height · ratio applies --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:auto w:15rem video p-sm">16:9</div></div><!-- Definite height · 80px --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:5rem w:15rem video p-sm">240 × 80</div></div>Use the video shortcut
video describes a 16:9 preferred box; it does not create a player or load media. This figure has a definite fluid width, no default figure margin, and an actual image that fills its 16:9 frame.
<div id="layout" class="w:15rem" role="group" aria-label="Available space"> <figure id="target" class="w:100% video m:0"> <img id="peer" class="block full object-cover" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /> </figure></div>Choose size for fixed squares
For a fixed 40px square control, size directly sets both dimensions. A ratio is more useful when one dimension should be derived from the other.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <button id="target" class="grid place-items:center width:2.5rem height:2.5rem round p:0 border-width:0" type="button" aria-label="Add layer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg></button></div>Apply conditionally
Resize past sm to change a 240px-wide media box from 1:1 to 4:3. Its automatic height follows the real ratio, changing from 240px to 180px.
<div id="layout" class="w:15rem" role="group" aria-label="Available space"> <img id="target" class="block h:auto w:100% square object-cover aspect-ratio:4/3@sm" src="/demo/landscape.svg" width="320" height="200" alt="Sun above blue and violet mountains" /></div>