Last updated: 15 January 2026

Tailwind CSS Aspect Ratio

Set element aspect ratios in Tailwind CSS with aspect-auto, aspect-square, aspect-video, and custom ratios. Essential for responsive images, videos, and embeds.

Interactive Aspect Ratio Playground

Try each class live and inspect the CSS output.

Utility class
aspect-video
CSS output
aspect-ratio: 16 / 9;

The aspect-* utilities in Tailwind CSS set the aspect ratio of an element, ensuring it maintains its proportions regardless of the parent container's size. This is essential for responsive images, video embeds, thumbnails, and any element that needs consistent proportions.

How to Set Tailwind Aspect Ratio

Apply an aspect ratio with the aspect-{ratio} class:

  • aspect-auto – Default browser behavior, no forced ratio.
  • aspect-square – 1:1 ratio (perfect square).
  • aspect-video – 16:9 ratio (standard video).
HTML
1<div class="aspect-video bg-gray-200 rounded-lg">
2  16:9 video container
3</div>

aspect-square (1:1)

aspect-video (16:9)

All Aspect Ratio Classes

| Class | CSS Property | Common Use | |-------|-------------|------------| | aspect-auto | aspect-ratio: auto | Default behavior | | aspect-square | aspect-ratio: 1 / 1 | Profile pictures, thumbnails, icons | | aspect-video | aspect-ratio: 16 / 9 | YouTube embeds, video players |

Responsive Images

Combine aspect-* with object-cover for perfectly proportioned images:

HTML
1<div class="aspect-video overflow-hidden rounded-lg">
2  <img src="/image.jpg" class="w-full h-full object-cover" alt="Cover image" />
3</div>

Square image

Video ratio

Video Embeds

The classic use case — responsive YouTube or Vimeo embeds:

HTML
1<div class="aspect-video w-full">
2  <iframe
3    class="w-full h-full rounded-lg"
4    src="https://www.youtube.com/embed/..."
5    allowfullscreen
6  ></iframe>
7</div>

Responsive Aspect Ratios

Change aspect ratios at different breakpoints:

HTML
1<div class="aspect-square md:aspect-video lg:aspect-auto">
2  Square on mobile, 16:9 on tablet, auto on desktop
3</div>

✏️ Arbitrary Value Usage

Set custom aspect ratios with arbitrary values:

HTML
1<!-- 4:3 ratio -->
2<div class="aspect-[4/3]">
3  Classic TV ratio
4</div>
5

6<!-- 3:2 ratio -->
7<div class="aspect-[3/2]">
8  Photo ratio
9</div>
10

11<!-- 21:9 ultrawide -->
12<div class="aspect-[21/9]">
13  Ultrawide cinema ratio
14</div>

4:3 ratio

3:2 ratio

21:9 ultrawide

Common Layout Patterns

Thumbnail Grid

HTML
1<div class="grid grid-cols-3 gap-2">
2  <div class="aspect-square overflow-hidden rounded-lg">
3    <img src="/photo1.jpg" class="w-full h-full object-cover" alt="Photo 1" />
4  </div>
5  <div class="aspect-square overflow-hidden rounded-lg">
6    <img src="/photo2.jpg" class="w-full h-full object-cover" alt="Photo 2" />
7  </div>
8  <div class="aspect-square overflow-hidden rounded-lg">
9    <img src="/photo3.jpg" class="w-full h-full object-cover" alt="Photo 3" />
10  </div>
11</div>

Hero Image with Fixed Ratio

HTML
1<div class="aspect-[2/1] w-full overflow-hidden rounded-xl">
2  <img src="/hero.jpg" class="w-full h-full object-cover" alt="Hero banner" />
3</div>

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe