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