工作原理
使用我们的响应式 object-fit
实用程序类更改 object-fit
属性 的值。此属性以多种方式告知内容填充父容器,例如保持纵横比或拉伸以占据尽可能多的空间。
object-fit
值的类使用 .object-fit-{value}
格式命名。从以下值中进行选择
contain
cover
fill
scale
(用于缩小)
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}
格式,其中断点缩写如下:sm
、md
、lg
、xl
和 xxl
。可以根据需要组合类以实现各种效果。
<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
Object fit 实用程序在 scss/_utilities.scss
中的实用程序 API 中声明。 了解如何使用实用程序 API。
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),