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