使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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）