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.