Aspect Ratio

Class	Properties
ar-auto	aspect-ratio: auto;
ar-l	aspect-ratio: 16/9;
ar-s	aspect-ratio: 1/1;

Auto

This example sets the aspect ratio to auto. The ar-auto utility allows the element to maintain its default aspect ratio based on its content.

<div class="ar-auto h-32">
  <img class="dim-full of-c rad-1" src="https://picsum.photos/600/400?image=106" />
</div>

16/9

This example sets the aspect ratio to 16/9. The ar-l utility enforces a widescreen aspect ratio.

<div class="ar-l h-32">
  <img class="dim-full of-c rad-1" src="https://picsum.photos/600/400?image=106" />
</div>

1/1

This example sets the aspect ratio to 1/1. The ar-s utility enforces a square aspect ratio.

<div class="ar-s h-32">
  <img class="dim-full of-c rad-1" src="https://picsum.photos/600/400?image=106" />
</div>

Conditional styles

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

Media modifiers

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

<div class="ar-s md:ar-l ..."></div>

Hover modifiers

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

<div class="ar-s h:ar-l ..."></div>