MapCSS

Layout

Aspect Ratio

Utilities for controlling the aspect ratio of an element.

Basic usage

Setting the aspect ratio

Use the aspect-{ratio} utilities to set the desired aspect ratio of an element.

<iframe
  className="w-full **aspect-video** ..."
  src="https://www.youtube.com/..."
></iframe>

Tailwind doesn't include a large set of aspect ratio values out of the box since it's easier to just use arbitrary values. See the arbitrary values section for more information.

Browser support

The aspect-{ratio} utilities use the native aspect-ratio CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind's aspect-ratio plugin is a good alternative.