CSS3 object-position 属性

CSS object position 属性用于指定 <img> 或 <video> 在其容器中的位置。

请看以下来自巴黎的 400x300 像素图像：

Paris

接下来，我们使用 object-fit: cover; 保持高宽比并填充给定的尺寸。然而，图像将被裁剪以适应，像这样:

Paris

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>
<h2>使用 object-fit: cover;</h2>
<img src="/znadmin/md/1304/0.jpg" alt="Paris" width="400" height="300">
</body>
</html>

运行一下

使用 object-position 属性

假设显示的图像部分不是我们想要的位置。要定位图像，我们将使用 object position 属性。

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

Paris

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>使用 object-position</h2>
<img src="/znadmin/md/1304/0.jpg" alt="Paris" width="400" height="300">
</body>
</html>

运行一下

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

Paris

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}
</style>
</head>
<body>
<h2>使用 object-position</h2>
<img src="/znadmin/md/1304/0.jpg" alt="Paris" width="400" height="300">
</body>
</html>

运行一下

CSS Object-* 属性

下表列出了 Object-* 属性：

属性	描述
object-fit	指定 <img> 或 <video> 应如何调整大小以适应其容器。
object-posititon	指定 <img> 或 <video> 如何在“自己的内容框”中使用x/y坐标来定位一个对象。。

CSS3 object-position 属性

使用 object-position 属性

CSS Object-* 属性

分类导航