如何使用 CSS object

css object-fit:cover 如何裁剪图片以显示上部？

在使用 css object-fit:cover 时，默认会将图片放置在中心并裁剪以适合容器。然而，有时我们需要裁剪图片以显示其顶部。我们该如何实现呢？

解决方案：

要裁剪图片以显示上部，我们可以使用 css object-position 属性。该属性允许我们控制裁剪位置，将其从中心移动到顶部。

立即学习“前端免费学习笔记（深入）”；

代码：

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image {
  object-fit: cover;
  object-position: 0 0;
}

登录后复制

在上面的代码中，我们将 object-position 设置为 0 0，这表示剪裁位置位于图像的左上角。通过这种方式，我们可以确保图片的上部始终显示在容器中。

值得注意的是，object-position 属性的第一个值表示左右位置，第二个值表示上下位置。因此，要裁剪图像以显示底部，我们可以将 object-position 设置为 0 100%。

以上就是如何使用 CSS object-fit:cover 裁剪图片以显示其上部？的详细内容，更多请关注抖狐科技其它相关文章！