如何制作根据图像数量改变图像大小的响应式图像网格？

Question

我正在尝试制作一个响应式图像网格，当有多个图像彼此相邻时，它会使图像变小，而当只有一个图像时会变大。

（为了更好地理解，下面是一些预期结果的照片）

图片1：

图片二：

我试过最大宽度和最小宽度并使用各种显示模式，但没有成功。此外，我试过在互联网上寻找，但也没有运气。

.photos .content {
  width: 70%;
  min-height: 100%;
  margin-left: 15%;
  background-color: #F5F5F5;
}

.photos .content .grid {
  display: overflow: none;
}

.photos img {
  max-width: 30%;
  min-width: 25%;
  height: 30%;
}

<div class="panel photos">
  <div class="content" id="photos">
    <div class="grid">
      <img src="img/sample-images/sample1.jpg">
      <img src="img/sample-images/sample2.jpg">
      <img src="img/sample-images/sample3.jpg">
    </div>
  </div>
</div>

Answer 1

在父容器

中使用这个CSS

display:grid;
grid-template-columns:repeat( 3 (no. of images), 1fr );

如果您继续在其旁边添加图片，它会在第一行自动调整

Answer 2

我假设第一行有 3 张图像，第二行有 3 张图像。

不要将图片的宽度设为 30%，而是设为 100%

这样它将根据视口缩小尺寸

.grid {
  display: grid;
  grid-template-columns : repeat(3,1fr);
  grid-template-rows: repeat(2, 20vw);
  grid-gap: 10px;
}

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
}

CodePen link

如何制作根据图像数量改变图像大小的响应式图像网格？

How to make a responsive image grid which changes image size depending on the amount of images?

html

css

grid-layout