布局
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" />响应式设计
前缀一个 object-fit 实用工具 使用一个断点变体，如 md:，仅在中等 屏幕尺寸及以上应用该实用工具
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />了解更多关于在变体文档中使用变体的信息。
