布局
object-fit
用于控制替换元素的内容应该如何调整大小的工具类。
| Class | Styles |
|---|---|
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" />响应式设计
Prefix an object-fit utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />Learn more about using variants in the variants documentation.