object-position
object-position CSS 屬性指定了所選替換元素內容在其元素框中的對齊方式。未被替換元素物件覆蓋的框區域將顯示元素的背景。
你可以使用 object-fit 屬性來調整替換元素物件的固有大小（即其自然大小）以適應元素框的方式。
試一試
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/moon.jpg" />
</section>
#example-element {
height: 250px;
width: 250px;
object-fit: none;
border: 1px solid red;
}
語法
css
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* <percentage> values */
object-position: 25% 75%;
/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
值
<position>-
一到四個值，定義了元素的二維位置。可以使用相對或絕對偏移量。
注意： 可以設定位置，使替換元素繪製在其框的外部。
正式定義
正式語法
object-position =
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
示例
定點陣圖像內容
HTML
在這裡我們看到包含兩個 <img> 元素的 HTML，每個都顯示 MDN 標誌。
html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
CSS
CSS 包含 <img> 元素本身的預設樣式，以及兩個影像的單獨樣式。
css
img {
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;
object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position: 100% 10%;
}
第一個影像的位置是其左邊緣距離元素框左邊緣內縮 10 畫素。第二個影像的位置是其右邊緣與元素框右邊緣齊平，並且位於元素框高度的 10% 處。
結果
規範
| 規範 |
|---|
| CSS 影像模組第三級 # the-object-position |
瀏覽器相容性
載入中…
另見
- 其他與影像相關的 CSS 屬性：
object-fit、image-orientation、image-rendering、image-resolution。