object-position

目标位置

大object-position属性确定所选元素在其框内的对齐方式。

/* <position> values */
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

Initial value	50% 50%
Applies to	replaced elements
Inherited	yes
Percentages	refer to width and height of element itself
Media	visual
Computed value	as specified
Animation type	repeatable list of simple list of length, percentage, or calc
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

价值

<position>从一个值到四个值，定义元素的2D位置。可以使用相对或绝对偏移量。请注意，该位置可以设置在元素%27s框之外。

形式语法

<position>where 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where 
<length-percentage> = <length> | <percentage>

例

HTML内容

<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>

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%;
}

输出量

规格

Specification	Status	Comment
CSS Image Values and Replaced Content Module Level 4The definition of 'object-position' in that specification.	Working Draft	The from-image and flip keywords have been added.
CSS Image Values and Replaced Content Module Level 3The definition of 'object-position' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	31.0	16	36 (36)	No support	11.60-o 19.0	10.0

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.4.4	36 (36)	No support	11.5-o 24	No support