CSS object-position 屬性

定義和用法

object-position 屬性與 object-fit 一起使用，可規定應如何在其“自己的內容框”內使用 x/y 坐標定位 <img> 或 <video>。

HTML DOM 參考手冊：objectPosition 屬性

調整圖像的大小以適合其內容框，并將圖像在內容框內的位置從左側移動 5px，從頂部移動 10％：

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

object-position: position|initial|inherit;

值	描述
position	規定圖像或視頻在其內容框中的位置。第一個值控制 x 軸，第二個值控制 y 軸。可以是字符串（left、center 或 right）或數字（以 px 或％為單位）。允許負值。
initial	將此屬性設置為其默認值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

值

描述

position

規定圖像或視頻在其內容框中的位置。

第一個值控制 x 軸，第二個值控制 y 軸。

可以是字符串（left、center 或 right）或數字（以 px 或％為單位）。允許負值。

initial

將此屬性設置為其默認值。參閱 initial。

inherit

從其父元素繼承此屬性。參閱 inherit。

默認值：	50% 50%
繼承：	是
動畫制作：	支持。請參閱：動畫相關屬性。
版本：	CSS3
JavaScript 語法：	object.style.objectPosition="0 10%"

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome	IE / Edge	Firefox	Safari	Opera
31.0	16.0	36.0	10.0	19.0