Tailwind CSS - 物件適應

Tailwind CSS 物件適應是一個實用程式類，它提供了一種有效的方式來控制影像或影片如何調整大小以適應其容器。

Tailwind CSS 物件適應類

以下是Tailwind CSS 物件適應類列表，它提供了一種有效的方式來調整影像或影片以適應其容器。

類	CSS 屬性
object-contain	object-fit: contain;
object-cover	object-fit: cover;
object-fill	object-fit: fill;
object-none	object-fit: none;
object-scale-down	object-fit: scale-down;

Tailwind CSS 物件適應類的功能

object-contain: 此類替換 CSS object-fit: contain; 屬性。此類調整影像或影片的大小，同時保持其縱橫比以適應其容器。
object-cover: 此類替換 CSS object-fit: cover; 屬性。此類調整影像或影片的大小，同時保持其縱橫比以完全填充其容器，可能需要裁剪內容。
object-fill: 此類替換 CSS object-fit: fill; 屬性。此類拉伸影像或影片以完全填充其容器，同時忽略縱橫比。
object-none: 此類替換 CSS object-fit: none; 屬性。此類以其原始大小顯示內容，忽略容器大小。
object-scale-down: 此類替換 CSS object-fit: scale-down; 屬性。此類將影像或影片調整為儘可能小的尺寸，同時保持其縱橫比。

Tailwind CSS 物件適應類示例

以下示例將說明 Tailwind CSS 物件適應類實用程式。

包含元素

以下示例說明了Tailwind CSS 物件包含類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-contain h-full w-full" />
    </div>

</body>
</html>

調整大小以覆蓋容器

以下示例說明了Tailwind CSS 物件覆蓋類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-cover h-full w-full" />
    </div>

</body>
</html>

拉伸以適應容器

以下示例說明了Tailwind CSS 物件填充類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-fill h-full w-full" />
    </div>

</body>
</html>

使用元素的原始大小

以下示例說明了Tailwind CSS 物件無類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-none h-full w-full" />
    </div>

</body>
</html>

如果太大則縮小

以下示例說明了Tailwind CSS 物件物件縮小類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="font-bold text-xl mb-3">
        Tailwind CSS Object Contain Class
    </h2>
    <div class="h-48 w-48 border 
                border-gray-400">
        <img src="/html/images/html.jpg" 
             class="object-scale-down
                    h-full w-full" />
    </div>

</body>
</html>

列印頁面