CSS参考手册
图像值 | Image Values
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 |
图像值 | Image Values相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。