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

Question

我一直在试图弄清楚如何调整图像的宽度和高度，使其不会拉伸(stretch)加上，它只显示较低的部分。我已经设法调整它，但我不知道如何显示唯一的下部。作为引用，我想做一些像我们在 background-image 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;
}

Answer 1

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

好的 CSS 技巧 article对此。