Aspect Ratio
The Aspect Ratio utilities maintain consistent aspect ratios for elements, ensuring proper proportions across different screen sizes and contexts. This component is essential for responsive images, video containers, cards, and any content that needs to maintain specific width-to-height relationships regardless of the container size.
Example
<div class="ratio --ratio-16x9">
<img src="video-thumbnail.jpg" alt="Video thumbnail" />
</div>
<div class="ratio --ratio-1x1">
<iframe src="https://example.com/embed" title="Embedded content"></iframe>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--ratio |
auto |
The aspect ratio value |
Class Utilities
| Class | Description |
|---|---|
.--ratio-1x1 |
Square aspect ratio (1:1) |
.--ratio-16x9 |
Widescreen aspect ratio (16:9) |
.--ratio-2x1 |
Panoramic aspect ratio (2:1) |
.--ratio-3x2 |
Traditional photo aspect ratio (3:2) |