CSS object-position 属性
CSS object-position
属性用于指定<img>或者<video>应放置在其容器内。
图片
看看下面这张来自巴黎的图片,尺寸为 400x300 像素:
接下来我们使用 object-fit: cover;
保持宽高比并填充给定的尺寸。但是,图像将被裁剪以适应,如下所示:
使用 object-position 属性
假设显示的图像部分没有按我们想要的位置定位。要定位图像,我们将使用 object-position
财产。
在这里我们将使用 object-position
属性来定位图像,以便伟大的古老建筑位于中心:
在这里我们将使用 object-position
属性来定位图像,以便著名的埃菲尔铁塔位于中心:
CSS 对象-* 属性
下表列出了 CSS object-* 属性:
财产 | 描述 |
---|---|
对象适合 | 指定如何<img>或者<video>应调整大小以适合其容器 |
客体位置 | 指定如何<img>或者<video>应将其 x/y 坐标定位在其“自己的内容框”内 |