CSS object-position 属性

此 CSS 属性用于指定内容在容器内的对齐方式。它与 object-fit 属性一起使用，用于描述像 <video> 或 <img> 这样的元素如何在容器内通过 x/y 坐标进行定位。

当使用 object-fit 属性时，object-position 的默认值为 50% 50%，因此，默认情况下，所有图像都位于其容器的中心。我们可以使用 object-position 属性来更改默认对齐方式。

语法

值

position: 它定义了视频或图像在容器内的位置。它接受两个数值（例如 0 10px），第一个值控制 x 轴，第二个值控制 y 轴。它可以是字符串（left, right 或 center），也可以是数字（以 % 或 px 为单位）。它允许负值。其默认值为 50% 50%。我们可以使用字符串值，如 right top, left bottom 等。

initial: 它将属性设置为默认值。

inherit： 它继承父元素的属性。

现在，让我们看一些示例来说明 object-position 属性。

示例

输出

程序执行后，我们将获得下图所示的输出。

示例 - 使用“center top”

输出

示例 - 使用“right top”

输出

示例 - 使用“left top”

输出

示例 - 使用“initial”

当我们使用 initial 值时，图像将居中显示。这是因为 initial 将属性设置为其默认值，即 50% 50%。

输出