Tailwind CSS - 宽高比

Tailwind CSS - 宽高比

Tailwind CSS 中的宽高比（aspect ratio）工具类允许你控制元素的比例尺寸。这对于为图片、视频嵌入和其他媒体元素创建响应式布局至关重要，确保它们在不同屏幕尺寸下保持其形状。

核心功能说明

重要提示： 从 Tailwind CSS v3.0 开始，宽高比工具类已内置到核心框架中。新项目不再需要旧的 @tailwindcss/aspect-ratio 插件。

宽高比类

以下是控制宽高比的主要类，包括对任意值的支持。

类名	CSS 属性
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;
aspect-[W/H]	aspect-ratio: W / H; (例如，aspect-[4/3])

实际应用：响应式媒体

宽高比最常见的用例是确保媒体元素按可预测的方式缩放。下面的示例展示了如何创建响应式视频嵌入和一个具有一致宽高比的产品图片网格。

<!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>

浏览器支持

底层的 CSS aspect-ratio 属性现在已得到所有现代浏览器的广泛支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器（如 Internet Explorer），则需要使用旧的基于内边距的技术，但这对于新项目来说很少成为问题。