Tailwind CSS - 宽高比

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

语法

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

Tailwind CSS 宽高比类

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

类	CSS 属性
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

宽高比类的功能

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

</html>

支持的浏览器

类
宽高比	是	是	是	是 15.0	是

打印页面