CSS object-position 属性

在网页设计中，通常需要将一个图片放置到指定的区域中。而在合适的位置展示图片通常需要一些调整。在这种情况下，可以使用 object-position 属性。

概述

object-position 属性用于设置一个图片（或其他替换元素）的位置。它指定的是该图片在容器中的位置，而不是图片自身在其图像资源中的位置。

语法

object-position: <position> | left | center | right | top | bottom | inherit;

• <position> 用长度，百分比或者关键字表示
• left 和 right 分别等价于 0% 和 100%
• top 和 bottom 分别等价于 0% 和 100%

例子

让我们看一下使用 object-position 的一些例子。

使用关键字

例如，如果我们想将一个图片放到容器的中心，可以使用 object-position: center 这个关键字:

img {
  object-position: center;
}

这将把图片放在容器的中心位置。

使用百分比

我们还可以使用百分比来设置位置。例如，如果我们想将一个图片的左边缘与容器的左边缘保持一定距离（例如30%），可以使用以下代码：

img {
  object-position: 30% center;
}

使用长度

类似地，我们也可以使用绝对或相对长度来设置位置。例如，下面的CSS将图片的左边缘向左移动10像素：

img {
  object-position: -10px center;
}

设置多个值

最后，我们还可以设置多个值来更精确地控制图片的位置。例如，以下代码将图片的底部与容器底部对齐，并将图片的左侧与容器左侧保持一定距离。

img {
  object-position: left bottom 20px;
}

总结

object-position 属性对于规范图片在容器内的位置非常有用。通过使用关键字，百分比或者长度等不同的方式，可以精确地控制图片的位置。