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 工具类调整元素内容尺寸以覆盖其容器：

<!-- [!code classes:object-cover] -->
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

包含在容器内

使用 object-contain 工具类调整元素内容尺寸，使其保持在容器范围内：

<!-- [!code classes:object-contain] -->
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

拉伸以填满

使用 object-fill 工具类拉伸元素内容以填满其容器：

<!-- [!code classes:object-fill] -->
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

缩小适配

使用 object-scale-down 工具类以原始尺寸显示元素内容，必要时再缩小以适配容器：

<!-- [!code classes:object-scale-down] -->
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

使用原始尺寸

使用 object-none 工具类以原始尺寸显示元素内容，忽略容器尺寸：

<!-- [!code classes:object-none] -->
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

响应式设计

使用 md: 等断点变体作为 object-fit 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

<!-- [!code classes:md:object-cover] -->
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

了解如何使用变体，请参阅变体文档。