jquery - 在固定高度的容器中调整图像大小

Question

所以基本上我想要实现的是在页面上以 strip 形式出现的图像(具有固定高度)。现在，如果图像太宽而无法完全容纳，我想用“溢出:隐藏”切断边缘并将其居中。我设法做到了，但现在我失败了:我不希望图像太窄时被拉伸(stretch)，但我希望它溢出到包含 div 的顶部。

Here您可以看到一个示例:当您滚动到底部时，您可以看到 3 张图片，我想复制这些图片在视口(viewport)水平宽度为 1200 像素到 1800 像素之间的行为方式。

---

这是我到目前为止的基本标记:

<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%
}

我尝试了几个 jQuery 插件，但都没有产生预期的结果，而且我无法修改 CSS 来产生我需要的结果。我非常心烦意乱，因此非常感谢任何帮助!

提前致谢!

Answer 1

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

例如:

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