如何根据 flexbox 内的窗口大小使项目的大小发生变化？

Question

我在 html/css 中使用 flexbox 创建了一个基本的图片库。 当前页面上有六个图像，并且由于 flex-wrap，它们根据窗口大小将配置从 1x6 更改为 2x3 到 3x2 到 4+2 到 5+1 到 6x1。 现在我想加入 2 个进一步的功能：

1. 缩放不应超过 3x2，以保持网站的对称性。在 3x2 之后，图像的大小应该会增加
2. 图像的大小也应根据窗口进行缩放。例如，当我在 2x3 配置中增加窗口大小时，图像大小也应该增加，直到达到 3x2 配置。这是为了确保图像占据窗口的整个宽度（除非有一些填充） 我试过百分比宽度，但它确实与 flexbox 不兼容。

以下是html：

   


.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
   
    margin: 150px;
  } 

  .image
  {
    min-width: 30%;
    flex-grow: 1;
    transition: 0.2s;  
    padding: 0 2vw 4vw;
    margin: 20px 10px 20px;
  }


  
  
  
  

        
        <!--Image gallery-->
        <div class="container">
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
            <a href="test_image.jpeg">
                <div class="image"><img src="test_image.jpeg" href="test_image"></div>
            </a>
        </div>
                
   

Answer 1

要使图像缩放以填充容器，请在行 div 上设置 justify-content: stretch，在图像容器 div 上设置 flex-grow: 1，并在图像本身上设置 width: 100%。在图像 div 上设置 min-width 大约 30% 将使其保持

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: center;
    margin: 150px 40px;
}

.image {
    padding: 0 20px 40px;
    min-width: 25%;
    flex-grow: 1;
}

img {
    width: 100%;
}

这里有一个例子（很难看到它与这么小的容器一起工作，但你可以通过缩小来判断）：https://jsfiddle.net/817o6r0f/