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

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

你需要单独设置一个东西，即高度或宽度，以保持其纵横比相同。

在您的情况下，您需要在所有图像上保持相同的高度，因此您只需要删除max-width属性，如下所示：

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

你也可以参考我刚刚创建的小提琴：https://jsfiddle.net/387bnaer/

Answer 2

删除 max-width ＆amp; max-height 属性，只需添加宽度＆amp;你的css中的高度属性

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

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