使div高度相同，并在div上调整图像大小Photo Gallary

如何解决使div高度相同，并在div上调整图像大小Photo Gallary

我在容器中有一个div，每个div包含具有不同大小的图像，因此我需要使所有div具有相同的大小并根据其调整图像大小。

HTML

 <div class="container photogallarySocial"> 
  <div class="photogallarySocialImg">
    <img src="img/nopath%20-%20copy%20(36).png" >
    <img src="img/nopath%20-%20copy%20(37).png">
    <img src="img/nopath%20-%20copy%20(29).png" >
  </div>
   <div class="photogallarySocialImg">
     <img src="img/nopath%20-%20copy%20(41).png" >
    <img src="img/nopath%20-%20copy%20(31)-1.png" >
    <img src="img/nopath%20-%20copy%20(30).png" >
  </div> 
   <div class="photogallarySocialImg">
    <img src="img/nopath%20-%20copy%20(35).png" >
    <img src="img/nopath%20-%20copy%20(32).png">
  </div> 
  <div class="photogallarySocialImg">
    <img src="img/nopath%20-%20copy%20(34).png" >
    <img src="img/nopath%20-%20copy%20(39).png">
  </div>

</div>

css

.photogallarySocial {
  display: -ms-flexBox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
 
}

/* Create four equal columns that sits next to each other */
.photogallarySocialImg {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
  height: fit-content;

}

.photogallarySocialImg img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .photogallarySocialImg {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .photogallarySocialImg {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

这是我使用的代码，我试图通过更改divs高度来解决它，但它不会影响图像的高度和宽度。

检查下面的图像

Code Result

Result I need