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

codepen 没有使用我正在尝试使用的图像，而只是测试图像。

Answer 1

将类添加到img

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

并在 css 中为 img 类添加高度

.myimg {
   height:200px
}