html - 如何调整图像的高度和宽度，以使其不拉伸(stretch)并且仅下部可见？

我一直在尝试找出如何调整图像的宽度和高度，以使其不会拉伸，而仅显示下部。我设法进行了调整，但是我不知道如何显示唯一的下部。作为参考，我想做一些像我们在背景图像background-position: center;中所做的事情。到目前为止，这是我的代码。

    <div id="featured-banner" class="lazy-load song-image">
    <img alt="featured img" src="images/U1NbAmCyHljBGOOHH28bSve3wBk9Fkjb.jpg">
</div>

的CSS

.song-image {
    width: 100%;
    height: 412px;
    overflow: hidden;
}
#featured-banner img {
    display: inline-block;
    width: 100%;
    margin-top: 0px;
    padding: 0px 15px 15px;
}

最佳答案

您可以尝试使用object-fit和object-position css属性。

良好的CSS技巧article。