How to use Aspect Ratio in Tailwind?

Maintaining proportions with aspect ratio.

What You'll Learn

Built-in aspect ratios
Custom ratios
Common use cases

Built-in Ratios

index.htmlHTML

<div class="aspect-square">1:1 ratio</div>
<div class="aspect-video">16:9 ratio</div>
<div class="aspect-auto">Natural ratio</div>

Video/Image Container

index.htmlHTML

<div class="aspect-video">
  <iframe class="w-full h-full" src="..."></iframe>
</div>

<div class="aspect-square">
  <img class="w-full h-full object-cover" src="..." />
</div>

Custom Aspect Ratio

code.jsJavaScript

// tailwind.config.js
theme: {
  extend: {
    aspectRatio: {
      '4/3': '4 / 3',
      '21/9': '21 / 9',
    },
  },
}

With Arbitrary Values

index.htmlHTML

<div class="aspect-[4/3]">4:3 ratio</div>
<div class="aspect-[21/9]">21:9 ultrawide</div>

How to handle Overflow in Tailwind?

How does Object Fit work in Tailwind?