使用对象 fit 实用程序修改应如何调整替换元素（例如 或 ）的内容大小以适合其容器。<img><video>
运作方式
使用我们的响应式实用程序类更改 object-fit 属性的值。此属性告知内容以多种方式填充父容器，例如保留纵横比或拉伸以占用尽可能多的空间。object-fit
的值的类使用 格式命名 。从以下值中进行选择：object-fit.object-fit-{value}
containcoverfillscale（用于缩小规模）none
例子
将类添加到替换的元素中：object-fit-{value}
<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">响应
对于以下断点缩写，每个值也使用格式 ，存在响应式变体：、、、 和 。可以根据需要组合类以获得各种效果。object-fit.object-fit-{breakpoint}-{value}smmdlgxlxxl
<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">视频
和响应式实用程序也适用于元素。.object-fit-{value}.object-fit-{breakpoint}-{value}<video>
<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>
CSS系统
Sass 实用程序 API
对象适合实用程序在我们的实用程序 API 中声明。了解如何使用实用工具 API。scss/_utilities.scss
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),