如何使用CSS object-fit:cover 精确指定裁剪位置?

如何使用css object-fit:cover 精确指定裁剪位置?

css object-fit:cover如何精确指定裁剪位置?

在使用css object-fit:cover属性时,图片默认会居中裁剪。然而,如果你希望展示图片的上部,可以通过以下方法进行调整。

使用object-position属性,你可以精确指定图片裁剪的位置。该属性接受两个值,第一个值控制水平位置,第二个值控制垂直位置。

要展示图片的上部,可以将object-position设置为(50% 0)。如下所示:

img {
  object-fit: cover;
  object-position: 50% 0;
}

这将使图片的顶部与容器的顶部对齐。

以上就是如何使用CSS object-fit:cover 精确指定裁剪位置?的详细内容,更多请关注其它相关文章!