如何根据Flexbox中的窗口大小更改项目的大小？

由 发布于

我在html / css中使用flexbox创建了一个基本的图片库。 当前页面上有六张图片，由于使用了自动换行，它们会根据窗口大小将配置从1x6更改为2x3到3x2更改为4 + 2并将配置更改为5 + 1到6x1。 现在，我想结合2个其他功能：

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

以下是html：

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

.image {
  padding: 0 20px 40px;
}
<div class="row">
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
  <div class="image"><img src="test_image.jpeg" href="test_image"></div>
</div>