CSS object-position属性

CSSobject-position属性用于指定 <img> 或 <video> 在其容器内的位置。

图片

看下面这张来自巴黎的图片，像素为 400x300：

接下来，我们使用object-fit: cover;保持纵横比并填充给定的尺寸。但是，图片将被裁剪以适合，如下所示：

img {
width: 200px;
height: 300px;
object-fit: cover;
}

假设图片中显示的部分没有按照我们想要的方式放置。为了定位图片，我们将使用object-position属性。

这里我们将使用object-position属性来定位图片，使伟大的老建筑位于中心：

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}

这里我们将使用object-position属性来定位图片，使著名的埃菲尔铁塔位于中心：

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}

下表列出了 CSS object-* 属性：

Property	Description
object-fit	Specifies how an <img> or <video> should be resized to fit its container
object-position	Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box"