Tailwind CSS - Aspect Ratio

Tailwind CSS aspect-ratio 实用程序允许我们控制元素的宽高比。使用这些实用程序类，我们可以定义元素所需的宽度和高度。

语法

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

Tailwind CSS aspect-ratio 类

以下提到的类可用于控制元素的宽高比。

宽高比类的功能

• 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.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-auto Class" />
    </div>

    <p>Tailwind CSS aspect-square Class</p>
    <div class="aspect-square">
        <img src=
"https://www.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-square Class" />
    </div>

    <p>Tailwind CSS aspect-video Class</p>
    <div class="aspect-video">
        <img src=
"https://www.tutorialspoint.com/cg/images/logo.png" 
             alt="Tailwind CSS aspect-video Class" />
    </div>
</body>

</html>

支持的浏览器

Class
Aspect Ratio	Yes	Yes	Yes	Yes 15.0	Yes