裁剪图像高度而不缩放

Question

我知道这是一个简单的问题，但我似乎无法找到解决方案。

我目前正在使用带有1920x1080 res图像的bootstrap轮播。 我希望图像保持不变，但要将高度裁剪为480px。 注意。没有缩放......图像应该被切断，没有拉伸或缩放。

让我们说这是我的css课程：

.carousel-top-img{
    height: 480px;// image scaled down to 853x480px
}

.carousel-top-img{
    max-height: 480px;// image stretched but 1920x480px met
    width: 100%
}

Answer 1

它不使用bootstrap，但这是一个纯CSS解决方案：

#this_img{
        width: 1920px;
        height: 480px;
        object-fit: cover;
    }

更多关于对象适合：LINK

我希望有帮助

Answer 2

Change the dimensions of .carousel-top-img's container and apply overflow: hidden to it.