CSS object-position 屬性
示例
將影像縮放到適合其內容框，並將影像定位在內容框內距左側 5 畫素，距頂部 10% 的位置
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
自己動手試一試 »
定義和用法
object-position 屬性與 object-fit 結合使用，用於指定 <img> 或 <video> 在其“自己的內容框”內如何透過 x/y 座標進行定位。
| 預設值 | 50% 50% |
|---|---|
| 繼承 | 是 |
| 可動畫 | 是。 閱讀有關 animatable 的資訊 嘗試一下 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.objectPosition="0 10%" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS 語法
object-position: position|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| position | 指定影像或影片在其內容框內的位置。第一個值控制 x 軸，第二個值控制 y 軸。可以是字串（left、center 或 right），也可以是數字（以 px 或 % 為單位）。允許使用負值。 | 試一試 » |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程：CSS object-fit
CSS 參考： CSS object-fit
HTML DOM 參考： objectPosition 屬性
