如何根据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>
评论