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 坐标定位 |