Aspect Ratio
The Aspect Ratio utility uses the native CSS aspect-ratio property to maintain consistent proportions for elements. Perfect for images, videos, and containers that need to maintain specific width-to-height ratios across different screen sizes.
Basic Usage
Use predefined aspect ratio classes to constrain element dimensions to specific proportions.
These utilities apply the CSS aspect-ratio property directly to elements.
1:1
16:9
3:4
Aspect Ratio
Basic Usage
<!-- Square aspect ratio -->
<div class="aspect--1/1">...</div>
<!-- Widescreen aspect ratio -->
<div class="aspect--16/9">...</div>
<!-- Portrait aspect ratio -->
<div class="aspect--3/4">...</div>Available Aspect Ratios
Complete reference of all available aspect ratio utilities.
| Class | Ratio |
|---|---|
aspect--auto
|
No constraints |
aspect--1/1
|
1:1 |
aspect--4/3
|
4:3 |
aspect--3/2
|
3:2 |
aspect--16/9
|
16:9 |
aspect--21/9
|
21:9 |
aspect--3/4
|
3:4 |
aspect--2/3
|
2:3 |
aspect--9/16
|
9:16 |
aspect--9/21
|
9:21 |