Tailwind CSS - Aspect Ratio

Tailwind CSS - Aspect Ratio

The aspect ratio utilities in Tailwind CSS allow you to control the proportional dimensions of an element. This is essential for creating responsive layouts for images, video embeds, and other media elements, ensuring they maintain their shape across different screen sizes.

Core Feature Note

Important: As of Tailwind CSS v3.0, aspect ratio utilities are built into the core framework. The old @tailwindcss/aspect-ratio plugin is no longer required for new projects.

Aspect Ratio Classes

Here are the primary classes for controlling aspect ratio, including support for arbitrary values.

Class	CSS Properties
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;
aspect-[W/H]	aspect-ratio: W / H; (e.g., aspect-[4/3])

Practical Application: Responsive Media

The most common use case for aspect ratio is ensuring media elements scale predictably. The example below shows how to create a responsive video embed and a grid of product images with consistent aspect ratios.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- For demonstration, we use the Tailwind Play CDN. No plugins needed for aspect ratio. -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

  <h2 class="text-3xl font-bold mb-6 text-center">Responsive Media with Aspect Ratio</h2>

  <!-- Section 1: Responsive Video Embed -->
  <section class="max-w-3xl mx-auto mb-12">
    <h3 class="text-xl font-semibold mb-4">1. Responsive Video (16:9)</h3>
    <div class="aspect-video bg-gray-300 rounded-lg overflow-hidden shadow-lg">
      <!-- In a real scenario, you would place an <iframe> here -->
      <iframe
        class="w-full h-full"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
      </iframe>
    </div>
  </section>

  <!-- Section 2: Image Gallery -->
  <section class="max-w-5xl mx-auto">
    <h3 class="text-xl font-semibold mb-4">2. Consistent Image Gallery</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">

      <!-- Card with Square Image (1:1) -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="aspect-square bg-gray-200">
          <img src="https://picsum.photos/seed/picsum1/800/800" alt="Square placeholder image" class="w-full h-full object-cover">
        </div>
        <div class="p-4">
          <p class="font-bold">Square (1:1)</p>
        </div>
      </div>

      <!-- Card with Landscape Image (4:3) using arbitrary value -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="aspect-[4/3] bg-gray-200">
           <img src="https://picsum.photos/seed/picsum2/800/600" alt="Landscape placeholder image" class="w-full h-full object-cover">
        </div>
        <div class="p-4">
          <p class="font-bold">Landscape (4:3)</p>
        </div>
      </div>

      <!-- Card with Portrait Image (9:16) using arbitrary value -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="aspect-[9/16] bg-gray-200">
          <img src="https://picsum.photos/seed/picsum3/900/1600" alt="Portrait placeholder image" class="w-full h-full object-cover">
        </div>
        <div class="p-4">
          <p class="font-bold">Portrait (9:16)</p>
        </div>
      </div>

    </div>
  </section>

  <h3 class="text-center mt-8 text-gray-600">Resize your browser to see the elements scale while maintaining their aspect ratio.</h3>
</body>
</html>

Browser Support

The underlying CSS aspect-ratio property is now widely supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. For legacy browser support (like Internet Explorer), older padding-based techniques would be necessary, but this is rarely a concern for new projects.