如何使用 CSS object-fit:cover 裁剪图片以显示其上部？
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%。