Layout

Aspect Ratio

Utilities for controlling the aspect ratio of an element.

Quick reference

Warning

Known problem: the shortcuts aspect-ratio, aspect-square, aspect-video are not working as intended.

Class	Description
aspect-ratio	aspect-ratio: auto
aspect-square	aspect-ratio: 1/1
aspect-video	aspect-ratio: 16/9
aspect-1/1	Sets the aspect ratio to 1:1
aspect-4/3	Sets the aspect ratio to 4:3
aspect-16/9	Sets the aspect ratio to 16:9
aspect-2/1	Sets the aspect ratio to 2:1
aspect-{fraction}	Sets the aspect ratio to any {fraction}

Available values
{fraction}: Any fraction is valid - e.g. 1/5

Note

Aspect ratio support is currently provided via the padding-bottom fallback method. The built-in aspect-ratio property is not yet well supported.

Basic usage

Setting the aspect ratio

Use the aspect-{ratio} utilities to set the desired aspect ratio of an element.

<div class="aspect-2/1">
  <img class="object-cover" src="..." alt="..." />
</div>

<div class="aspect-1/1">
  <img class="object-cover" src="..." alt="..." />
</div>

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:aspect-1/1 to apply the aspect-16/9 utility at only medium screen sizes and above.

<iframe class="w-full aspect-16/9 md:aspect-1/1" src="..."></iframe>