对象定位

对象定位

用于控制替代元素的内容在其容器内应如何定位的工具类。

Class Styles

Class	Styles
`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-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 这样的工具类来指定替代元素的内容在其容器内应如何定位：

悬停在示例上查看完整图像

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.