Html 如何调整图像的高度和宽度，使其不会拉伸，其下部仅可见？

我一直在想，如何调整图像的宽度和高度，使其不会拉伸，只显示较低的部分。我已经设法调整了它，但我不知道如何显示唯一较低的部分。作为参考，我想做一些我们在背景图像

背景位置：中间。这是到目前为止我的代码

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

您可以尝试使用
对象拟合
和
对象位置
css属性

很好的CSS技巧。
当我了解您的问题时，我创建了一个plunker，请检查此项并让我知道这是您想要的。以下是链接-

手动设置图像宽度意味着它将拉伸到父div宽度的100%

。您需要的是

高度：自动；宽度：自动；最大高度：100%；最大宽度：100%以保持原始纵横比。然后，您可以定位图像以显示您喜欢的任何部分。您能否更改图像文件的相对链接，并上传图像的哪个部分以及您希望显示的示例？
.song-image {
    width: 100%;
    height: 412px;
    overflow: hidden;
}
#featured-banner img {
    display: inline-block;
    width: 100%;
    margin-top: 0px;
    padding: 0px 15px 15px;
}

div{
  width: 500px;
  overflow: hidden;
  height: 200px;
  position: relative;
}
div img{
  width: 100%;
  position: absolute;
  bottom:0;
}