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.

​
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