Aspect Ratio

Class	Style
ar-auto	aspect-ratio: auto;
ar-1/1	aspect-ratio: 1/1;
ar-1/2	aspect-ratio: 1/2;
ar-16/9	aspect-ratio: 16/9;
ar-2/1	aspect-ratio: 2/1;
ar-2/3	aspect-ratio: 2/3;
ar-3/2	aspect-ratio: 3/2;
ar-9/16	aspect-ratio: 9/16;

Auto

Initial value

Allows the element to maintain its default aspect ratio based on its content.

<div class="ar-auto h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

1/1

Enforces a square aspect ratio.

<div class="ar-1/1 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

1/2

Enforces a vertical aspect ratio.

<div class="ar-1/2 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

16/9

Enforces a widescreen aspect ratio.

<div class="ar-16/9 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

2/1

Enforces a horizontal aspect ratio.

<div class="ar-2/1 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

2/3

Enforces a vertical aspect ratio.

<div class="ar-2/3 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

3/2

Enforces a horizontal aspect ratio.

<div class="ar-3/2 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

9/16

Enforces a vertical aspect ratio.

<div class="ar-9/16 h-32">
  <img class="d-full of-c rad-1" src="/img/frangipani.jpg" />
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:ar-*,md:ar-*, lg:ar-*, and xxl:ar-* to allow targeting specific utilities in different viewports.

<div class="ar-1/1 md:ar-16/9 ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:ar-* utility to override elements and change their values when hovering over them.

<div class="ar-1/1 h:ar-16/9 ..."></div>