Tailwind CSS - 宽高比

Quiz

Tailwind CSS aspect ratio 工具类允许我们控制元素的宽高比。使用这些 utility classes，我们可以定义元素的期望宽度和高度。

语法

<element class="aspect-*">..<element>

Tailwind CSS 宽高比类

下面列出的类可以用来控制元素的宽高比。

Class	CSS Properties
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;

宽高比类的功能

aspect-auto: 该类替换 CSS aspect-ratio: auto 属性，确保元素在适应不同屏幕尺寸时保持原始比例。
aspect-square: 它替换 CSS aspect-ratio: 1 / 1 属性，确保元素在适应不同屏幕尺寸时保持正方形。
aspect-video: 它替换 CSS aspect-ratio: 16 / 9 属性，确保以响应式方式为嵌入的视频元素应用 16/9 宽高比。

Tailwind CSS 宽高比示例

下面的示例将演示 Tailwind CSS 宽高比类。

不同宽高比的图像

在以下示例中，我们将使用所有宽高比类来查看它们之间的差异。

<!doctype html>
<html>

<head>
    <script src=
"https://cdn.tailwindcss.com?plugins=aspect-ratio">
    </script>
    <script>
        tailwind.config = {
            plugins: [
                require('@tailwindcss/aspect-ratio')
            ],
        }
    </script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Aspect Ratio Class
    </p>
    <p>Tailwind CSS aspect-auto Class</p>
    <div class="aspect-auto">
        <img src=
"https://www.example.com" 
             alt="Tailwind CSS aspect-auto Class" />
    </div>

    <p>Tailwind CSS aspect-square Class</p>
    <div class="aspect-square">
        <img src=
"https://www.example.com" 
             alt="Tailwind CSS aspect-square Class" />
    </div>

    <p>Tailwind CSS aspect-video Class</p>
    <div class="aspect-video">
        <img src=
"https://www.example.com" 
             alt="Tailwind CSS aspect-video Class" />
    </div>
</body>

</html>