如何制作一个响应图像网格，该网格根据图像数量改变图像尺寸？

Question

我正在尝试制作一个响应式图像网格，当多个图像彼此相邻时，这些图像将变小；例如，只有一个图像时，该图像将变大。

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

照片1：

照片2：

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

.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