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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
