Wie stelle ich 2 nebeneinanderliegende Bilder automatisch auf die Breite und Höhe meines mobilen Bildschirms ein?

Question

Ich versuche, 2 Bilder (gleiche Größen) passen auf einem Bildschirm nebeneinander, dh wenn die Bildschirmbreite der begrenzende Faktor ist, müssen sie jeweils 50% der Breite nehmen, und wenn die Höhe der begrenzende Faktor ist, Sie müssen auf 100% der Bildschirmhöhe angezeigt werden. Das folgende funktioniert perfekt mit meinem Telefon im Hochformat (die Breite passt), aber wenn ich in die Landschaft blicke, passt die Breite immer noch perfekt, aber die Bilder sind länger als die Höhe.

Wie würde ich es erreichen, in Breite und Höhe zu skalieren, so dass beide Bilder immer nebeneinander und vollständig sichtbar sind?

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <img class="img-responsive col-xs-6" src="..." alt="card1" /> 
 
     <img class="img-responsive col-xs-6" src="..." alt="card2" /> 
 
    </div> 
 
</div>

Answer 1

können Sie benutzerdefinierte Stylesheets verwenden, die Codes wie unten umfasst:

@media screen and (min-height: 321px /* or max-height: 321px */) { 
 
    .img-responsive { 
 
    width: 100%; 
 
    height: auto; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    object-fit: cover; 
 
    } 
 
}