Aspect Ratio

Utilities for giving elements a fixed aspect ratio.


Class reference

ClassProperties
aspect-w-1--tw-aspect-w: 1;
aspect-h-1--tw-aspect-h: 1;
aspect-w-2--tw-aspect-w: 2;
aspect-h-2--tw-aspect-h: 2;
aspect-w-3--tw-aspect-w: 3;
aspect-h-3--tw-aspect-h: 3;
aspect-w-4--tw-aspect-w: 4;
aspect-h-4--tw-aspect-h: 4;
aspect-w-5--tw-aspect-w: 5;
aspect-h-5--tw-aspect-h: 5;
aspect-w-6--tw-aspect-w: 6;
aspect-h-6--tw-aspect-h: 6;
aspect-w-7--tw-aspect-w: 7;
aspect-h-7--tw-aspect-h: 7;
aspect-w-8--tw-aspect-w: 8;
aspect-h-8--tw-aspect-h: 8;
aspect-w-9--tw-aspect-w: 9;
aspect-h-9--tw-aspect-h: 9;
aspect-w-10--tw-aspect-w: 10;
aspect-h-10--tw-aspect-h: 10;
aspect-w-11--tw-aspect-w: 11;
aspect-h-11--tw-aspect-h: 11;
aspect-w-12--tw-aspect-w: 12;
aspect-h-12--tw-aspect-h: 12;
aspect-w-13--tw-aspect-w: 13;
aspect-h-13--tw-aspect-h: 13;
aspect-w-14--tw-aspect-w: 14;
aspect-h-14--tw-aspect-h: 14;
aspect-w-15--tw-aspect-w: 15;
aspect-h-15--tw-aspect-h: 15;
aspect-w-16--tw-aspect-w: 16;
aspect-h-16--tw-aspect-h: 16;
aspect-w-{n}position: relative; padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
aspect-w-{n} > *position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0;

Usage

Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element:

<div class="aspect-w-16 aspect-h-9">
<!-- ... -->
</div>

Use aspect-none to remove any aspect ratio behavior:

<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<!-- ... -->
</div>

Note that due to the way this currently needs to be implemented (the old padding-bottom trick) you need to assign the aspect ratio to a parent element, and make the actual element you are trying to size the only child of that parent.

Once the aspect-ratio property is supported in modern browsers, we’ll add official support to Tailwind CSS itself and deprecate this plugin.

Responsive

To control the line-clamp at a specific breakpoint, add a {screen}: prefix to any existing z-index utility. For example, use md:line-clamp-5 to apply the line-clamp-5 utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.