2 Bilder füllend volle Breite mit der gleichen Höhe

Question

Bonjour,

Ich habe 2 Bilder und ich möchte diese nebeneinander anzeigen.
Ich möchte, dass sie die gesamte Breite des Containers ausfüllen und die gleiche Höhe haben.

Haben Sie eine Ahnung, wie es zu tun?
Ich möchte Bildverhältnis erhalten.
Der grüne Rahmen repräsentieren mein Behälter (wahrscheinlich einige div)

Vielen Dank im Voraus.

Answer 1

Verwenden Sie max-height und geben Sie den Wert - den Mindestwert der Höhe im Vergleich zu beiden Bildern max-height: minimum-image-height(from both images).

Werfen Sie einen Blick auf das Snippet unten:

.image { 
 
    max-height: 200px; 
 
}

<div class="box"> 
 
    <img src="http://placehold.it/200x200" alt="" class="image" /> 
 
    <img src="http://placehold.it/300x600" alt="" class="image" /> 
 
</div>

hoffe, das hilft!

Answer 2

Hier sind die codepen und Schnipsel mit flex :(http://codepen.io/dpes/pen/MbeBbd)

.flex-container{ 
 
    display:flex; 
 
    align-items: flex-start; 
 
} 
 
.flex-container img { 
 
    object-fit: contain; 
 
    max-height: 300px; 
 
    min-height: 300px; 
 
}

<div class="flex-container"> 
 
    <img src="http://lorempixel.com/400/500/"> 
 
    <img src="http://lorempixel.com/500/400/"> 
 
</div>