CSS object-position 属性
CSS object-position
属性用于指定 <img> 或 <video> 在其容器中的定位方式。
图像
请看下面这张 400x300 像素的巴黎图片

接下来,我们使用 object-fit: cover;
来保持宽高比并填充给定尺寸。但是,图像将被剪裁以适应,如下所示

使用 object-position 属性
假设图像显示的部分未按我们希望的方式定位。要定位图像,我们将使用 object-position
属性。
在这里,我们将使用 object-position
属性来定位图像,以便宏伟的古老建筑位于中心

在这里,我们将使用 object-position
属性来定位图像,以便著名的埃菲尔铁塔位于中心

CSS Object-* 属性
下表列出了 CSS object-* 属性
属性 | 描述 |
---|---|
object-fit | 指定 <img> 或 <video> 如何调整大小以适应其容器 |
object-position | 指定 <img> 或 <video> 应如何在其“自己的内容框”内使用 x/y 坐标定位 |