如何实现缩小的等高图像列

Question

我想实现一个类似网格的布局，其中一行中的每一列都具有相同的高度。每列包含一张图片，因此还必须保持图片的比例。

目前的解决方案是将flex-grow属性设置为图片的比例。这可行，但可能会导致图像非常大，这在我的情况下是不需要的。

如果剩下负空间，我希望图像缩小以适应一行。

flex-shrink 属性的工作方式类似于 flow-grow 属性。负空间将根据 flex-shrink 属性在项目之间分配。

然而，在 flex-shrink 行为中有一个警告：项目永远不会缩小到小于其内容的大小。在我的情况下，这意味着该列永远不会缩小到小于它包含的图像的大小。

我可以通过将 flex-basis 属性设置为较小的值来解决此问题。我玩过这个，但要么弄乱了包装，要么弄乱了高度。

我希望发生的事情：

考虑以下标记：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
}

.img-container {
  padding: 5px;
  box-sizing: border-box;
  flex-basis: auto;
}

.img {
  width: 100%;
  height: auto;
}

<div class="container">
  <div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
    <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
  </div>
  
  <div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
    <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
  </div>

  <div style="flex-grow: 2; flex-shrink: 2;" class="img-container">
    <img class="img" src="https://via.placeholder.com/400x200/" alt=""> 
  </div>
</div>

宽度之和为 200+200+400=800px，即有 800-600=200px 的负空间。 flex-shrink 值规定第一项和第二项占负空间的 1 部分，第三项占 2 部分。

计算得出：

• 要从第一项中移除的宽度：1/4*200=50
• 要从第二项中移除的宽度：1/4*200=50
• 要从第三项中移除的宽度：2/4*200=100

这些宽度是正确的，并且会保持正确的比例，但正如我之前提到的，这是无法实现的，因为 flex-basis 是图像元素的自然宽度。

你们对如何解决这个问题有什么建议吗？

Answer 1

如果您设置 .container 的宽度和 .img-container 的高度，它应该可以工作。

现在您只需要决定要如何间隔图像。 .container { justify-content: space-evenly/space-between/space-around}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  justify-content: space-evenly;
}

.img-container {
  padding: 5px;
  box-sizing: border-box;
  flex-basis: auto;
  height: 150px;
}

.img {
  width: auto;
  height: 100%;
}

<div class="container">
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/400x200/" alt=""> 
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/400x200/" alt=""> 
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/400x200/" alt=""> 
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
   <div class="img-container">
      <img class="img" src="https://via.placeholder.com/200x200/" alt="">     
   </div>
</div>