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; 属性。此类将图像或视频调整为尽可能小的尺寸，同时保持其纵横比。

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

Tailwind CSS 对象适应类示例

以下示例将说明 Tailwind CSS 对象适应类实用程序。

包含元素

以下示例说明了Tailwind CSS 对象包含类的用法。

示例

Open Compiler

<!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 对象覆盖类的用法。

示例

Open Compiler

<!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 对象填充类的用法。

示例

Open Compiler

<!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 对象无类的用法。

示例

Open Compiler

<!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 对象对象缩小类的用法。

示例

Open Compiler

<!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>

打印页面