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.