html - 如何获得相同高度的图像？

Question

我正在尝试处理图像部分，其中它们是从服务器呈现的。有些图像具有不同的高度。因此，我无法以某种方式对齐图像。

注意 - 我已使用 display:inline 对齐图像，但目前无法解决高度问题。

现状:

我试图遵循的与 Google 类似:

img.res-img {
  max-width: 350px;
  max-height: 300px;
  padding-top: 20px;
  padding: 0.6%;
  float: left;
}

.image-result {
  padding-left: 80px;
  display: inline;
}

<div class="image-result" *ngIf="Display('images')">
  <div *ngFor="let item of items$|async">
    <a href="{{item.link}}"><img class="res-img" src="{{item.link}}" onerror="this.style.display='none'"></a>
  </div>
</div>

如果有人能帮我解决这个问题，那就太好了。谢谢!

UDPATE 1 - 我根据建议所做的是 -

img.res-image {
  float: left;
  position: relative;
  width: 20%;
}

现在是这个样子，还是高度问题没能解决!

更新 2 - 经过回答后，此解决方案似乎有效。但是，图像的分辨率降低了，宽高比也不合适。

img.res-img {
  width: 350px;
  height: 300px;
  padding-top: 20px;
  padding: 0.6%;
  float: left;
}

我删除了 max-width 和 max-height 并使用了 width 和 height

现在是这样的:

Answer 1

删除 ma​​x-width 和 ma​​x-height 属性，并在您的 css 中仅添加 width 和 height 属性

    img.res-img {
      width: 350px;
      height: 300px;
      padding-top: 20px;
      padding: 0.6%;
      float: left;
    }

    .image-result {
      padding-left: 80px;
      display: inline;
    }