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.
Common Aspect Ratios
Use predefined aspect ratio classes to constrain element dimensions to specific proportions.
These utilities apply the CSS aspect-ratio property directly to elements.
Auto Aspect Ratio
Use aspect--auto to remove aspect ratio constraints
and let content determine the dimensions naturally.
Aspect Ratio
Auto
<div class="aspect--auto">
<!-- Content determines dimensions -->
</div>Square Ratio
Use aspect--1/1 for perfect squares.
Ideal for profile pictures, thumbnails, and icon containers.
Aspect Ratio
Square
<div class="aspect--1/1">
<img src="profile.jpg" />
</div>Landscape Ratios
Common landscape aspect ratios for horizontal content like videos, hero images, and media players.
Aspect Ratio
Landscape
<!-- Standard TV/Monitor ratio -->
<div class="aspect--4/3">
<video src="video.mp4" />
</div>
<!-- Classic 35mm film -->
<div class="aspect--3/2">
<img src="photo.jpg" />
</div>
<!-- HD Video/Modern displays -->
<div class="aspect--16/9">
<iframe src="youtube.com/embed/..." />
</div>
<!-- Cinematic ultra-wide -->
<div class="aspect--21/9">
<video src="movie.mp4" />
</div>Portrait Ratios
Portrait aspect ratios for vertical content like mobile screens, story formats, and portrait photography.
Aspect Ratio
Portrait
<!-- Vertical standard -->
<div class="aspect--3/4">
<img src="portrait.jpg" />
</div>
<!-- Vertical classic -->
<div class="aspect--2/3">
<img src="photo.jpg" />
</div>
<!-- Mobile/Story format -->
<div class="aspect--9/16">
<video src="story.mp4" />
</div>
<!-- Tall mobile format -->
<div class="aspect--9/21">
<img src="mobile-screenshot.png" />
</div>Responsive Aspect Ratios
Aspect ratio utilities support responsive variants, allowing you to change aspect ratios at different breakpoints. This is useful for adapting content layout across devices.
Aspect Ratio
Responsive
<!-- Square on mobile, widescreen on tablet, ultra-wide on desktop -->
<div class="aspect--1/1 md:aspect--16/9 lg:aspect--21/9">
<img src="responsive-image.jpg" />
</div>
<!-- Portrait on mobile, landscape on larger screens -->
<div class="aspect--9/16 md:aspect--16/9">
<video src="adaptive-video.mp4" />
</div>Working with Images
Aspect ratio utilities use the native CSS aspect-ratio property
to constrain element dimensions. Apply these classes directly to images or containers as needed.
Direct on image
Square aspect
Aspect Ratio
Image Usage
<!-- Apply directly to image -->
<img src="image.jpg" class="aspect--16/9 w--full image--cover" />
<!-- Use container for more control -->
<div class="aspect--16/9 overflow-hidden">
<img src="image.jpg" class="w--full h--full image--contain" />
</div>
<!-- Square aspect ratio -->
<img src="image.jpg" class="aspect--1/1 w--full image--cover" />Available Aspect Ratios
Complete reference of all available aspect ratio utilities.
| Class | Ratio | Common Use | Responsive |
|---|---|---|---|
| aspect--auto | No constraints | Natural dimensions | ✓ Yes |
| aspect--1/1 | 1:1 | Square images, avatars | ✓ Yes |
| aspect--4/3 | 4:3 | Standard TV, presentations | ✓ Yes |
| aspect--3/2 | 3:2 | Classic 35mm photography | ✓ Yes |
| aspect--16/9 | 16:9 | HD video, YouTube | ✓ Yes |
| aspect--21/9 | 21:9 | Cinematic, ultra-wide displays | ✓ Yes |
| aspect--3/4 | 3:4 | Portrait standard | ✓ Yes |
| aspect--2/3 | 2:3 | Portrait photography | ✓ Yes |
| aspect--9/16 | 9:16 | Mobile screens, Stories | ✓ Yes |
| aspect--9/21 | 9:21 | Tall mobile format | ✓ Yes |