版面配置
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" />在變體文件中了解更多關於使用變體的資訊。
