object-fit

示例

调整大小以覆盖

使用 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.