object-fit
控制替换元素内容应如何调整尺寸的实用工具。
快速参考
| 类 | 样式 |
|---|---|
| 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; |
示例
调整尺寸以覆盖
使用 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" />
在 变体文档 中了解更多关于使用变体的信息。