Wie bekomme ich Bilder mit gleicher Höhe?

Question

Ich versuche, an einem Bildabschnitt zu arbeiten, in dem sie von den Servern gerendert werden. Es gibt einige Bilder, die unterschiedliche Höhen haben. Aus diesem Grund kann ich die Bilder nicht auf eine Art ausrichten.

HINWEIS - Ich habe die Bilder ausgerichtet, mit display:inline aber derzeit nicht in der Lage, Höhe Problem zu lösen.

Aktueller Zustand:

Was ich versuche zu folgen ist ähnlich wie 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>

Es wäre toll, wenn mir jemand helfen kann damit draußen. Vielen Dank!

UDPATE 1 - Was ich von Vorschlägen tat, ist dies -

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

Dies ist, wie es jetzt aussieht, ist noch Höhe Problem zu lösen, nicht in der Lage zu sein!

UPDATE 2 - Nach der Antwort scheint diese Lösung zu funktionieren. Aber die Auflösung der Bilder wurde verringert und das Seitenverhältnis ist nicht korrekt.

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

Ich habe max-width und max-height entfernt und verwendet width und height

Dies ist, wie es jetzt aussieht:

Answer 1

entfernen max-width & max-height Eigenschaft und fügen Sie einfach Breite & Höhe Eigenschaft in Ihrem 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

Sie müssen allein eine Sache setzen, das heißt entweder die Höhe oder die Breite um das Seitenverhältnis gleich zu halten.

In Ihrem Fall müssen Sie Höhe auf alle Bilder gleich sein, so dass Sie nur die max-width Eigenschaft wie folgt entfernen müssen:

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

Sie auch dir Geige beziehen kann ich gerade erstellt: https://jsfiddle.net/387bnaer/