对象适应

示例

覆盖调整

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