布局
object-position
Utilities for controlling how a replaced element's content should be positioned within its container.
类 | 样式 |
---|---|
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>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 object-left
和 object-right-bottom
等工具指定替换元素的内容应如何在其内部定位容器:
¥Use utilities like object-left
and object-right-bottom
to specify how a replaced element's content should be positioned within its container:
悬停在示例上以查看完整图片
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" />
使用自定义值(Using a custom value)
¥Using a custom value
使用 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()
函数。
响应式设计(Responsive design)
¥Responsive design
在 object-position
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />
请参阅 变体文档 详细了解如何使用变体。