Skip to content

Aspect Ratio

Controls the aspect ratio of an element.

Utility Properties

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

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="d-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-1/1 utility enforces a square aspect ratio.

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

1/2

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

<div class="ar-1/2 h-32">
<img class="d-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-16/9 utility enforces a widescreen aspect ratio.

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

2/1

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

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

2/3

This example sets the aspect ratio to 2/3. The ar-2/3 utility enforces a vertical aspect ratio.

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

3/2

This example sets the aspect ratio to 3/2. The ar-3/2 utility enforces a horizontal aspect ratio.

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

9/16

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

<div class="ar-9/16 h-32">
<img class="d-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-1/1 md:ar-16/9 ..."></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-1/1 h:ar-16/9 ..."></div>