javascript - CSS 响应式 flex 宽度，固定边距，但高度自动匹配图像内容高度

Question

我想要 3 个 div 能够流畅地响应浏览器宽度(缩放宽度和高度并保持相同的比例)。我的大部分图像都是垂直的，这就是我创建为 overflow:hidden 的原因，因为我不介意隐藏很长图像的图像部分 - 例如网站的屏幕截图!

但是在某些情况下，一些图像会较短，那么在这种情况下该怎么办？也许使用 JS？

这是我的代码:https://codepen.io/anon/pen/wrygJE

.flex1 {
  display: flex;
}

body {
  background-color: #ccc;
}

.archives .imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 70vw;
  height: 0;
  margin: 30px 0;
  margin-bottom: 40px;
  overflow: hidden;
  border: 10px solid #fff;
}

.archives {
  padding: 30px 30px 40px 30px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
  position: relative;
}

.archives img {
  width: 100%;
  position: absolute;
  left: 0;
}

.archives .imageContainer.half.medium {
  width: calc(30% - 15px);
  width: -moz- width:calc(30% - 15px);
  width: -webkit- width:calc(30% - 15px);
  width: -o- width:calc(30% - 15px);
  display: inline-block;
  margin-left: 30px;
  flex-grow: 3;
}

.archives .imageContainer.half.small {
  width: calc(15% - 15px);
  width: -moz- width:calc(15% - 15px);
  width: -webkit- width:calc(15% - 15px);
  width: -o- width:calc(15% - 15px);
  display: inline-block;
  margin-left: 30px;
  flex-grow: 3;
}

<div class="archives">
  <div class="flex1">
    <div id="thumb75" class="imageContainer  ">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
    <div id="thumb76" class="imageContainer half medium">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
    <div id="thumb77" class="imageContainer half small">
      <img src="https://i.pinimg.com/736x/cd/a2/ca/cda2ca355868d6f28144dfae7b1a6458--web-portfolio-portfolio-website.jpg">
    </div>
  </div>
</div>

Answer 1

flex 容器的初始设置是align-items:stretch。这意味着 flex 元素将沿横轴扩展以覆盖容器的整个可用长度。

如果您覆盖该默认值， flex 元素将缩小与内容的间隙。试试这个:

.flex1 {
    display: flex;
    align-items: flex-start;
 }

此外，请删除 Flex 元素中任何定义的高度，因为它们将覆盖 align-items。

revised codepen

相关:How to disable equal height columns in Flexbox?