object-fit

示例(Examples)

¥Examples

调整大小以覆盖(Resizing to cover)

¥Resizing to cover

使用 object-cover 工具调整元素内容的大小以覆盖其容器：

¥Use the object-cover utility to resize an element's content to cover its container:

<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

包含在内(Containing within)

¥Containing within

使用 object-contain 工具调整元素内容的大小以保持包含在其容器内：

¥Use the object-contain utility to resize an element's content to stay contained within its container:

<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

拉伸以适应(Stretching to fit)

¥Stretching to fit

使用 object-fill 工具在更改具有一组离散值的属性时启动转换，例如从 更改为 的元素：

¥Use the object-fill utility to stretch an element's content to fit its container:

<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

缩小(Scaling down)

¥Scaling down

使用 object-scale-down 工具以原始大小显示元素的内容，但必要时缩小以适合其容器：

¥Use the object-scale-down utility to display an element's content at its original size but scale it down to fit its container if necessary:

<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

使用原始大小(Using the original size)

¥Using the original size

使用 object-none 工具以原始大小显示元素的内容，忽略容器大小：

¥Use the object-none utility to display an element's content at its original size ignoring the container size:

<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

响应式设计(Responsive design)

¥Responsive design

在 object-fit 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

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