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项目将沿着横轴扩展，以覆盖容器的整个可用长度。

如果覆盖该默认值，则弹性项目将缩小与内容的差距。试试这个：

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

此外，从弹性项中删除任何已定义的高度，因为它们将覆盖align-items。

revised codepen

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

CSS响应柔性宽度，固定边距但HEIGHT自动匹配图像内容高度

1 个答案: