Lzh on GitHub

object-fit

控制替换元素内容应如何调整尺寸的实用工具。

快速参考

样式
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

示例

调整尺寸以覆盖

使用 object-cover 实用工具来调整元素内容的大小以覆盖其容器:

<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

包含在内

使用 object-contain 实用工具来调整元素内容的大小,使其保持在其容器内:

<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

拉伸以适应

使用 object-fill 实用工具来拉伸元素内容以适应其容器:

<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

缩小

使用 object-scale-down 实用工具以原始尺寸显示元素内容,但在必要时缩小以适应其容器:

<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

使用原始尺寸

使用 object-none 实用工具以原始尺寸显示元素内容,忽略容器大小:

<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

响应式设计

使用断点变体(例如 md:)作为 object-fit 实用工具的前缀,以便仅在中等尺寸及以上的屏幕上应用该实用工具:

<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

变体文档 中了解更多关于使用变体的信息。