动态显示多行多色图像

Question

我想在一个网页上代表大约20张图片。这些图像可以有一个肖像或景观方向。我想在更大的屏幕上以每行3种的方式构造它们，在移动电话上减少到1行，对于类似平板的设备则减少到2行。但是布局也可能取决于视口的方向。我有以下要求：

• 行高应该是行中任何照片的最大高度。例如:两张肖像画和一排一幅风景，行高就成了肖像照片的高度。
• 景观照片应放置在其单元格的中心，并在顶部/底部留下空白空间。
• 肖像照片应该能充分占据他们的细胞。
• 列应在可用宽度(33.33%、50%或100%的屏幕宽度)上均分。
• 我也希望页面响应，即图像必须收缩/放大取决于浏览器屏幕的宽度/高度。
• 每张照片的标题将位于图片的中心，就在图片的顶部下面，以显示计数器或小的描述性文本。

我读过很多文章，不是为了表解决方案，而是为了使用div解决方案。任何帮助都将不胜感激。

Answer 1

​

body {
  margin: 0;
  padding: 0;
}

.gallery {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.gallery > li {
  flex-basis: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: stretch;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery > li {
    flex-basis: calc(100% / 2);
  }
}
@media (max-width: 767px) {
  .gallery > li {
    flex-basis: calc(100% / 1);
  }
}
.gallery > li > figure {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: auto;
}
.gallery > li > figure img {
  max-width: 100%;
  height: auto;
  display: block;
  order: 1;
}
.gallery > li > figure figcaption {
  order: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  text-align: center;
  position: absolute;
}

<ul class="gallery"> 
  <li><figure><img src="https://picsum.photos/g/200/300?image=0" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=10" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=20" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=30" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/300/300?image=40" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=50" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=60" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=70" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=80" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=90" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=100" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=110" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/g/200/300?image=120" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=130" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=140" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=151" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/200?image=160" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/200/300?image=170" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=180" alt=""><figcaption>This is a caption</figcaption></figure></li>
  <li><figure><img src="https://picsum.photos/300/300?image=190" alt=""><figcaption>This is a caption</figcaption></figure></li>
</ul>

​