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;

寬高比類的功能

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

</html>

支援的瀏覽器

類
寬高比	是	是	是	是 15.0	是

列印頁面