Aspect Ratio

Keep media frames consistent with the bundled aspect-ratio utilities.

Overview

Use aspect ratio utilities when the shape of the frame matters more than the media inside it. The framework ships aspect-square, aspect-video, and aspect-auto (reset), with responsive --on-* variants where structural utilities support them.

Class	Ratio	CSS	Usage
.aspect-square	1:1	aspect-ratio: 1 / 1;	Square frames
.aspect-video	16:9	aspect-ratio: 16 / 9;	Video and hero media
.aspect-auto	—	aspect-ratio: auto;	Remove a fixed ratio; use intrinsic or content-driven sizing

Example

Best Practices

1. Set Width, Then Ratio

   Aspect ratio controls shape, but width still determines the overall size.

2. Pair With Object Fit

   Use .object-cover or .object-contain to decide how media behaves inside the frame.

3. Use Square for Repeating Media

   Avatars, product tiles, and thumbnail systems often benefit from aspect-square.

4. Use Video for Editorial Surfaces

   aspect-video works well for hero media, embeds, and featured content.

Related Utilities

Object Fit

Control how images fit in containers

Overflow

Control clipping and scrolling