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
html
<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->
<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>] 等工具类，根据完全自定义的值设置对象位置：
html
<img class="object-[25%_75%] ..." />对于 CSS 变量，也可以使用 object-(<custom-property>) 语法：
html
<img class="object-(--my-object) ..." />这只是 object-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体作为 object-position 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：
html
<img class="object-center md:object-top ..." />了解如何使用变体，请参阅变体文档。