Source

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 --16x9">
  <img src="video-thumbnail.jpg" alt="Video thumbnail" />
</div>

<div class="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
`.--1x1`	Square aspect ratio (1:1)
`.--16x9`	Widescreen aspect ratio (16:9)
`.--2x1`	Panoramic aspect ratio (2:1)
`.--3x2`	Traditional photo aspect ratio (3:2)

layout: Center →