Aspect Ratio

<!-- ===== Built-in scale ===== -->
<!-- aspect-auto    inherit -->
<!-- aspect-square  1:1 -->
<!-- aspect-video   16:9 -->

<div class="aspect-video bg-slate-100">
  <iframe src="https://www.youtube.com/embed/..." class="w-full h-full" allowfullscreen></iframe>
</div>

<div class="aspect-square bg-slate-100 rounded-full">
  <img src="avatar.jpg" class="w-full h-full object-cover rounded-full" />
</div>

<!-- ===== Arbitrary ratios ===== -->
<div class="aspect-[4/3] bg-slate-100">...</div>
<div class="aspect-[2/1]">...</div>
<div class="aspect-[1.618/1]">...</div>    <!-- golden ratio -->

<!-- ===== Custom in config ===== -->
<!-- tailwind.config.js:
extend: {
  aspectRatio: {
    'cover': '3 / 1',
    'card': '5 / 7',
  },
},
-->
<div class="aspect-cover">Banner</div>

<!-- ===== Browser support note ===== -->
<!--
aspect-ratio CSS property: supported in modern browsers (95%+).
For older support, use the padding-bottom hack:
  <div class="relative" style="padding-bottom: 56.25%">
    <iframe class="absolute inset-0 w-full h-full"></iframe>
  </div>
But you can usually drop that in 2026.
-->

<!-- ===== Common patterns ===== -->

<!-- 1. Video grid (16:9 cards) -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="aspect-video bg-slate-200 rounded"></div>
  <div class="aspect-video bg-slate-200 rounded"></div>
  <div class="aspect-video bg-slate-200 rounded"></div>
</div>

<!-- 2. Profile avatars (square) -->
<div class="flex gap-2">
  <div class="aspect-square w-12 rounded-full overflow-hidden">
    <img src="a.jpg" class="w-full h-full object-cover" />
  </div>
</div>

<!-- 3. Hero image (custom ratio) -->
<div class="aspect-[16/7] bg-cover bg-center" style="background-image: url(hero.jpg)"></div>

<!-- 4. Product cards (5:7 portrait) -->
<div class="grid grid-cols-2 gap-4">
  <div class="aspect-[5/7] bg-slate-200 rounded"></div>
  <div class="aspect-[5/7] bg-slate-200 rounded"></div>
</div>

<!-- ===== Patterns to internalise =====
- aspect-video / aspect-square cover most cases
- Arbitrary ratios with aspect-[w/h] when needed
- Pair with object-cover for images that exceed the container
- Custom ratios in config for repeated brand shapes
-->

<!-- ===== Pitfalls =====
- aspect-ratio on a flex item without min-height -> some browsers shrink
- iframe inside aspect-* without w-full h-full -> wrong size
- Mixing aspect-* with explicit height -> aspect ignored
- Background-image without bg-cover / bg-contain -> wrong sizing
-->

<div class="aspect-video bg-slate-200">16:9 box</div>