How to get images of same height? - html

Question

I'm trying to work on a images section, in which they are being rendered from the servers. There are some images which are having different heights. Because of this, I'm unable to align the images in a manner.
NOTE - I have aligned the images, using display:inline but currently not able to solve height problem.
Current condition :
What I'm trying to follow is similar to 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">
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</div>
</div>
It would be great, if someone can help me out with this. Thanks!
UDPATE 1 - What I did from suggestions is this -
img.res-image {
float: left;
position: relative;
width: 20%;
}
This is how it looks now, still height problem is not being able to solve!
UPDATE 2 - After going through answer, this solution seems to be working. But, the resolution of the images has been decreased and aspect ratio is not proper.
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
I have removed max-width and max-height and used width and height
This is how it looks now :

Answer 1

Remove max-width & max-height property and add just width & height property in your css
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}

Answer 2

You need to set one thing alone, i.e. either the height or the width to keep its aspect ratio same.
In your case you need height to be same on all images so you just need to remove the max-width property like this:
img.res-img {
/*max-width: 350px;*/
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
You can also refer to thee fiddle I just created: https://jsfiddle.net/387bnaer/