Aspect ratio
The aspect ratio utilities ensure that elements maintain consistent proportions across different screen sizes and contexts.
This layout is essential for responsive images, video containers, cards, and any other content that requires a specific width-to-height ratio, regardless of the container size.
The following aspect ratio can be set:
.aspect-ratio-1-1.aspect-ratio-4-3.aspect-ratio-10-15.aspect-ratio-16-9.aspect-ratio-21-9
Configuration #
| Property | Default value | Description |
|---|---|---|
--aspect-ratio | Set through the utility class | This CSS custom property is useful for overwriting the default aspect ratio of a component at certain breakpoints. For example, it can be used to switch from a square to a landscape format. |