在css样式中有一个覆盖，所以你只需要在一个站点中设置图像宽度，然后你的flex将工作https://codepen.io/elvengador/pen/abjbPjm
还有其他可能的解决方案：

• 如果你想显示所有的高度和宽度在框你需要显示图像作为背景与这个属性：

background-size: contain;
background-repeat: no-repeat;
background-position: center;

• 如果你想显示所有高度和宽度而不丢失任何空间，你可以在砖石建筑视图中显示如下：https://mui.com/material-ui/react-masonry/

• 在您的代码中，<figure>是Flexbox父代的直接后代，但它不允许增长，也不能填满整个行高。
• <figure>必须强制形成正方形。
• <figure>内的<img>必须能够水平和垂直增长以填充父<figure>。
• 显示2个与4个图像的断点应为900 / 16 = 56.25，而不是50
• 更改断点定义，以反映OP图像要求：
• 大小100%和1个图像，最大600px（默认）。我猜这是需要的，因为特定的600px-900px断点要求。如：* 当设备小于600px时会怎样？*
• 50%大小和2张600px（37.5em）及以上的图像（媒体查询）
• 大小为25%，4张图像为900px（56.25em）及以上（媒体查询）
• • 代码段**带注解：

body {
  width: 80%;
  margin: 30px auto;
  font-family: sans-serif;
}

h3 {
  text-align: center;
  font-size: 1.65em;
  margin: 0 0 30px;
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* or space-around */
}

a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(100% - 4px); /* MOD from 50% */
  text-decoration: none;
  color: black;
}

/* ADD to break at 600px */
@media screen and (min-width: 37.5em) {
  a {
    width: calc(50% - 4px);
  }
}

/* MOD from 50em to break at 900px */
@media screen and (min-width: 56.25em) {
  a {
    width: calc(25% - 6px);
  }
}

a:hover img {
  transform: scale(1.15);
}

figure {
  /* ADD */
  flex: 1;             /* Stretch to fill width */
  height: 100%;        /* dito height */
  aspect-ratio: 1 / 1; /* force to be a square */
  /**/

  margin: 0;
  overflow: hidden;
}

img {
  border: none;
  width: 100%;         /* MOD: from 300px */
  height: 100%;        /* dito, stretch to fill */
  object-fit: cover;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.p a {
  display: inline;
  font-size: 13px;
  margin: 0;
  text-decoration: underline;
  color: blue;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}

<div>
  <a href="https://i.imgur.com/uBlbQr5.png">
    <figure>
      <img src="https://i.imgur.com/uBlbQr5.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/5OBlxo1.png">
    <figure>
      <img src="https://i.imgur.com/5OBlxo1.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/HM3UavW.png">
    <figure>
      <img src="https://i.imgur.com/HM3UavW.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/XRabiFI.png">
    <figure>
      <img src="https://i.imgur.com/XRabiFI.png" alt="">
    </figure>
  </a>

  <a href="https://i.imgur.com/Np615iB.png">
    <figure>
      <img src="https://i.imgur.com/Np615iB.png" alt="">
    </figure>
  </a>

</div>

<p class="p">Demo by Larry Lo. <a href="http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/" target="_blank">See article</a>.</p>