使用 flexbox 创建可调整大小和可缩放的图像网格

Question

我正在尝试使用 FlexBox 制作可调整大小/可缩放的图像网格。

问题在于，每当由于调整窗口大小而导致图像比例过窄时，FlexBox 会在前几行放置额外的图像以填充空间。

在某些窗口比例下看起来不错。但是，如果窗口的高度太短而宽度太长，那么下排的图像会移到上排。

我尝试过使用弹性框和表格。在使用 FlexBox 时，我还尝试使用图像的 flex 属性设置 flex 项的宽度。这样做的问题是图像会拉伸和扭曲以填充所需的空间。

这是我正在使用的代码：

html, body { 
  height: 100%;
  width: 100%;
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: blue;
  height: 100%;
}

#flex-container>img {
  width: auto;
  height: auto;
  max-width: 25%;
  max-height: 50%;
  margin: auto;
}

<div id="flex-container">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">

  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
</div>

我想让图像保持在同一行和同一列，只根据页面的大小调整自己的大小。

我不需要使用 FlexBox，但它似乎是完成这项任务的最佳方式。

Answer 1

Flexbox 是这种布局的不错选择，但是当图像是 flex 项时，会有一些棘手的副作用。为了使这更简单，我发现将图像放在包装器 div 中非常有帮助。

现在使用width 控制每行的项目数，您可以使用媒体查询来随着屏幕变小而更改宽度，但此时您需要重新考虑容器的 100% 固定高度。

我已将 cmets 放入 CSS 中以突出显示重要的部分。

* {
  box-sizing: border-box; /* so borders and padding dont get in the way */
}

html,
body {
  height: 100%; /* you didint need width 100% here */
  margin: 0;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 100%;
}

.img-wrap {
  width: 25%;
  height: 50%;
  display: flex; /* flexbox layout for the image wrappers, allows for... */
  align-items: center; /* ...easy centering */
  justify-content: center;
  padding: 10px; /* just some spacing so the images can breathe, remove if you want them edge to edge */
  border: 1px solid red; /* so you can easily see the bounds of the wrapper divs, remove this */
}

.img-wrap img {
  max-width: 100%; /* max dimensions on the images so they always fit */
  max-height: 100%;
  height: auto; /* maintain aspect ratio */
  width: auto;
}

<div id="flex-container">
  <div class="img-wrap"><img src="https://picsum.photos/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/300/200"></div>
  <div class="img-wrap"><img src="https://picsum.photos/400/800"></div>
  <div class="img-wrap"><img src="https://picsum.photos/500/250"></div>

  <div class="img-wrap"><img src="https://picsum.photos/450/505"></div>
  <div class="img-wrap"><img src="https://picsum.photos/350/520"></div>
  <div class="img-wrap"><img src="https://picsum.photos/250/300"></div>
  <div class="img-wrap"><img src="https://picsum.photos/550/200"></div>
</div>