Skip to content

Aspect Ratio

Controls the aspect ratio of an element.

Class Properties

ar-s

aspect-ratio: 1/1;

ar-l

aspect-ratio: 16/9;

ar-auto

aspect-ratio: auto;

Using breakpoints

Using 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>

Using variants

Using :hover variants such as h:ar-* allows you to override elements and change their values when hovering over them.

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