Skip to main content

​
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.
ClassRatioCSSUsage
.aspect-square1:1aspect-ratio: 1 / 1;Square frames
.aspect-video16:9aspect-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.

Object Fit

Control how images fit in containers

Overflow

Control clipping and scrolling