Jquery 使用固定高度调整容器中的图像大小

所以基本上我想要实现的是一个在页面上以条带形式出现的图像（具有固定高度）。现在，如果图像太宽而无法完全贴合，我想用“溢出：隐藏”来切掉边缘并将其居中。我成功地做到了这一点，但现在我失败了：我不希望图像太窄时被拉伸，但我希望它溢出包含div的顶部

您可以看到一个示例：当您滚动到底部时，您可以看到3张图片，我想复制这些图片在视口水平宽度1200px和1800px之间的行为方式

---

这是我迄今为止的基本标记：

<div class="piccontainer">
    <img src="picture.jpg" class="picture"/>
</div>

.piccontainer {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 20vw;
    position: relative;
}
.picture {
    height: 100%
}

.piccontainer{
显示器：flex；
证明内容：中心；
溢出：隐藏；
最小高度：20vw；
位置：相对位置；
}
.图片{
身高：100%
}

我尝试了几个jQuery插件，它们都没有产生预期的结果，我也无法修改CSS来产生我所需要的。我非常心烦意乱，因此非常感谢您的帮助

---

提前谢谢你

更优雅的解决方案是只在div上使用背景图像

例如：

.piccontainer {
  background-image:url('/bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  height: 100vh;
}

---

插入图像需要100%吗？你认为使用图像作为背景：

.anyElement{
   background-image: url("yourimage.jpeg");
   background-attachment: fixed;
   background-repeat:no-repeat;
   background-size:contain;
   background-position:center;
}

---

您可能希望尝试将图像用作背景图像，然后使用

背景大小：封面属性

通过这种方式，您可以修复包含元素，并且您的图像将填充容器

.piccontainer {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 20vw;
    position: relative;
    background-image:url(picture.jpg);
    background-size:cover;
    background-position:center center;
}

参考资料：
你能粘贴一个示例截图来帮助我们了解更多信息吗？所以。。。怎么了？哦，我完全忘记了背景，我有img在那里，因为早期的实现，我想实现视差效果（因为UX问题，我放弃了）。这不是我想要的100%，因为你不能设置背景本身的最小宽度，所以它将永远从div的两侧流出（我希望你知道我的意思）。但它已经足够好了，所以我最终使用了它。谢谢