Question

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

当前解决方案是将flex-grow属性设置为图像的比例。这行得通，但是会导致非常大的图像，对于我而言，这是不需要的。

我希望在出现负空间的情况下将图像缩小以适合一行。

flex-shrink属性的作用类似于flow-grow属性。负空间将根据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>

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

1 个答案: