object-position
控制替换元素的内容在其容器中应如何定位的实用工具。
快速参考
| 类 | 样式 |
|---|---|
| object-top-left | object-position: top left; |
| object-top | object-position: top; |
| object-top-right | object-position: top right; |
| object-left | object-position: left; |
| object-center | object-position: center; |
| object-right | object-position: right; |
| object-bottom-left | object-position: bottom left; |
| object-bottom | object-position: bottom; |
| object-bottom-right | object-position: bottom right; |
| object-(<custom-property>) | object-position: var(<custom-property>); |
| object-<value> | object-position: <value>; |
示例
基本示例
使用 object-left 和 object-bottom-right 等实用工具来指定替换元素的内容在其容器中应如何定位：
将鼠标悬停在示例上以查看完整图像
object-top-left
object-top
object-top-right
object-left
object-center
object-right
object-bottom-left
object-bottom
object-bottom-right
<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />
使用自定义值
使用 object-[<value>] 语法根据完全自定义的值设置 object-position：
<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />
对于 CSS 变量，您还可以使用 object-(<custom-property>) 语法：
<img class="object-(--my-object) ..." src="/img/mountains.jpg" />
这只是 object-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。
响应式设计
使用断点变体（例如 md:）作为 object-position 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />
在 变体文档 中了解更多关于使用变体的信息。