布局
object-position
用于控制替换元素内容在其容器内的定位方式的实用工具。
| 类 | 样式 |
|---|---|
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-(<自定义属性>) | object-position: var(<自定义属性>); |
object-[<值>] | object-position: <值>; |
示例
基本示例
使用诸如 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" />使用自定义值
使用 object-[<值>] 语法 来设置对象位置基于完全自定义的值
<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />对于 CSS 变量，你也可以使用 object-(<自定义属性>) 语法
<img class="object-(--my-object) ..." src="/img/mountains.jpg" />这只是 object-[var(<自定义属性>)] 的简写形式，它会自动为你添加 var() 函数。
响应式设计
前缀一个 object-position 实用工具 带有一个断点变体，例如 md:，以便仅在中等 屏幕尺寸及以上应用该实用工具
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />在变体文档中了解有关使用变体的更多信息。
