CSS-试图为三个不同大小的图像设置相同的高度

Question

我在将三个图像设置为相同大小时遇到问题。我的问题是我有三张照片。两个尺寸相同，中间一个尺寸不同。我尝试通过访问我的类和图像元素来定位元素。

我确实有一个有效的解决方案，只需使用img，就可以将所有三个都集中起来，并且在响应模式下都不会中断。但随后主页顶部的公司标志断裂了。

我也尝试过使用高度，但后来我记得当我调整大小时会出现这种情况。

***.new-row {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
text-align: center;
margin: auto;
justify-content: center;
}
.test {
display: grid;
width: auto;
height: 700px;}
.new-row:hover {
transition-duration: 200ms;
transition: all;
cursor: pointer;
opacity: 100%;
}
/* Commercial Text */
.top-left-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle; 
overflow: hidden; 
color: #f8f8f8;
}
.top-right-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
overflow: hidden;
color: #f8f8f8;
}
.bottom-left-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
color: #f8f8f8;
}
.new-row div {
display: flex; 
width: 40%;
justify-content: center;
flex-direction: column;
padding-bottom: 40px;
opacity: 85%;
}
/* Text */
.container-text {
color: white;
text-transform: uppercase;
text-align: center;
}
.new-row div {
width: 30%;
height: 70%;
}
/* Fix for res2 not being the same length as the others */
.new-row div .top-right-column {
height: inherit;
}
.center-text {
position: absolute;
display: grid;
text-align: center;
font-size: 50px;
font-family:'Poppins', sans-serif;
width: 25%;
}

以下是一个示例：https://codepen.io/gulam101/pen/jOWxdBQ

代码笔并没有使用我尝试使用的图像，而是只是测试图像。

Answer 1

将类添加到img

<img class="myimg" .... >

并在css中为img类添加一个高度

.myimg {
height:200px
}