Aspect Ratio
Example
The aspect ratio utility class allows you to maintain a consistent width-to-height ratio for elements, such as images or videos. Use u-aspect-ratio to apply a default aspect ratio, or use modifiers like u-aspect-ratio--16-9 or u-aspect-ratio--4-3 for specific ratios.
Responsive aspect ratio container
16:9 Content
4:3 aspect ratio container
4:3 Content
Classes
Format: .u-aspect-ratio--pair
| Modifiers | Description | Values |
| pair | Adds an aspect ratio to an element. | 1-1, 16-9, 9-16, 4-3, 21-9 |