aspect-ratio

Setting the ratio for the box.

Overview

Examples

Set a custom ratio

Use aspect-ratio:<ratio> to reserve a proportional box before media or content finishes loading.

<img class="w:full aspect-ratio:4/3 object-cover" src="..." alt="" />

@layer utilities {    .aspect-ratio\:4\/3 {        aspect-ratio: 4/3    }    .w\:full {        width: 100%    }}

Use square and video shortcuts

Use square for 1 / 1 and video for a common widescreen media frame.

<div class="square bg:gray-5"></div><iframe class="w:full video" src="..." title="Product walkthrough"></iframe>

Pair with one explicit axis

Aspect ratio needs at least one axis to be resolved by width, height, or content. The common pattern is a fluid width with an aspect ratio.

<figure class="w:full max-w:4xl aspect-ratio:16/9">    ...</figure>

If both width and height are fixed, the browser follows those dimensions and the ratio is only a preferred constraint.

Use the video shortcut

Use video when you need the common 16 / 9 media frame.

<figure class="w:full video">...</figure>

Choose size for fixed squares

Use size for fixed square UI elements. Use aspect-ratio:* when at least one axis should remain fluid.

<button class="size:10x round">...</button>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="aspect-ratio:1/1 aspect-ratio:4/3@sm aspect-ratio:16/9@dark aspect-ratio:auto@print">...</div>

Use object-cover or object-contain on replaced media when the content should adapt inside the reserved ratio.