- Layout
- object-position
Layout
object-position
用於控制替換元素內容應如何在其容器內定位的通用類別。
| 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>; |
範例（Examples）
基本範例（Basic example）
使用 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
<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" />使用自訂值（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）
在 object-position 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<img class="object-center md:object-top ..." src="/img/mountains.jpg" />在變體文件中了解更多關於使用變體的資訊。