布局
object-position
用于控制替换元素的内容在其容器内如何定位的工具类。
| Class | Styles |
|---|---|
object-bottom | object-position: bottom; |
object-center | object-position: center; |
object-left | object-position: left; |
object-left-bottom | object-position: left bottom; |
object-left-top | object-position: left top; |
object-right | object-position: right; |
object-right-bottom | object-position: right bottom; |
object-right-top | object-position: right top; |
object-top | object-position: top; |
object-(<custom-property>) | object-position: var(<custom-property>); |
object-[<value>] | object-position: <value>; |
示例
基本示例
使用像 object-left 和 object-right-bottom 这样的工具类来指定替换元素的内容在其容器内的定位方式：
悬停在示例上以查看完整图像
object-left-top
object-top
object-right-top
object-left
object-center
object-right
object-left-bottom
object-bottom
object-right-bottom
<img class="size-24 object-left-top ..." src="/img/mountains.jpg" /><img class="size-24 object-top ..." src="/img/mountains.jpg" /><img class="size-24 object-right-top ..." 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-left-bottom ..." src="/img/mountains.jpg" /><img class="size-24 object-bottom ..." src="/img/mountains.jpg" /><img class="size-24 object-right-bottom ..." src="/img/mountains.jpg" />使用自定义值
Use the object-[<value>] syntax to set the 对象位置 based on a completely custom value:
<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />For CSS variables, you can also use the object-(<custom-property>) syntax:
<img class="object-(--my-object) ..." src="/img/mountains.jpg" />This is just a shorthand for object-[var(<custom-property>)] that adds the var() function for you automatically.
响应式设计
Prefix an object-position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />Learn more about using variants in the variants documentation.