CSS 属性 object-position
规定了可替换元素的内容,在这里我们称其为对象(即 object-position
中的 object
),在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分,则会显示该元素的背景(background
)。
你还可以使用 object-fit
属性来改变可替换元素的对象的内在(原文:intrinsic)大小(即它看上去的大小)的调整方式,借助拉伸与缩放等使对象更好地适应元素的内容框。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
/* <position> values */
object-position: center top;
object-position: 100px 50px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
取值
<position>
- 使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。
注意:这些定位方式允许被替换元素的对象被定位到内容框外部。
正式语法
<position>where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where
<length-percentage> = <length> | <percentage>
例子
HTML
Here we see HTML that includes two <img>
elements, each displaying the MDN logo.
这里我们看到包含两个img元素的HTML,分别展示了MDN的logo
<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
CSS包括<img>元素本身的默认样式,以及两个图像各自的样式。
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%处。
输出
规范
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 object-position |
Candidate Recommendation | Initial definition. |
初始值 | 50% 50% |
---|---|
适用元素 | replaced elements |
是否是继承属性 | yes |
Percentages | refer to width and height of element itself |
计算值 | as specified |
Animation type | repeatable list of simple list of length, percentage, or calc |
Browser compatibility
BCD tables only load in the browser
参见
- 其他与图像相关的 CSS 属性:
object-fit
,image-orientation
,image-rendering
,image-resolution
。