Tailwind CSS - Object Fit
Tailwind CSS Object-Fit 是一个实用类，它提供了一种有效的方法来调整图像或视频的大小以适应其容器。
Tailwind CSS Object-Fit 类
以下是 Tailwind CSS Object-Fit 类的列表，这些类提供了一种有效的方法来调整图像或视频在其容器内的大小。
| 类 | 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 Object Fit 类示例
以下示例将说明 Tailwind CSS Object Fit 类的实用功能。
包含元素
以下示例说明了 Tailwind CSS Object Contain 类的用法。
示例
<!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 Object Cover 类的用法。
示例
<!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 Object Fill 类的用法。
示例
<!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 Object None 类的用法。
示例
<!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 Object Object Scale Down 类的用法。
示例
<!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>
