aspect-ratio

Utilities for controlling the aspect ratio of an element.

Examples

Basic example

Use aspect-<ratio> utilities like aspect-3/2 to give an element a specific aspect ratio:

<img class="aspect-3/2 object-cover ..." src="/img/villa.jpg" />

Using a video aspect ratio

Use the aspect-video utility to give a video element a 16 / 9 aspect ratio:

<iframe class="aspect-video ..." src="https://www.example.com/embed/dQw4w9WgXcQ"></iframe>

Customizing your theme

Use theme variables to customise the values these utilities generate:

@theme {
  --text-tiny: 0.625rem;
}