object-fit属性

使用object-fit实用程序修改可替换元素（例如<img>或<video>）的内容应如何调整大小以适合其容器。

在此页

怎么运行的

使用我们的object-fit响应实用程序类更改属性的值。object-fit属性告诉内容以多种方式填充父容器，例如保持纵横比或拉伸以占用尽可能多的空间。

object-fit类的值使用格式命名.object-fit-{value}。从以下值中选择：

contain
cover
fill
scale（用于缩小）
none

例子

将object-fit-{value}类添加到可替换元素：

HTML

<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}的每个值也存在响应变体： sm、md、lg、xl、xxl。可以根据需要组合类以获得各种效果。

HTML

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

实用程序接口

对象适合实用程序在我们的实用程序 API 中声明scss/_utilities.scss。了解如何使用实用程序 API。

    "object-fit": (
      responsive: true,
      property: object-fit,
      values: (
        contain: contain,
        cover: cover,
        fill: fill,
        scale: scale-down,
        none: none,
      )
    ),