2つのサイドバイサイドイメージを自分のモバイル画面の幅と高さの両方に自動調整するにはどうすればよいですか？

Question

2つの画像（同じサイズ）を画面に横に並べて表示しようとしています。つまり、画面の幅が制限要因である場合は、それぞれ幅の50％を占める必要があります。また、画面の高さの100％で表示する必要があります。以下は、私の電話機と似たように縦長にフィットしますが、横向きにすると、幅は完全には収まりますが、画像は高さよりも長くなります。

両方の画像が常に横並びに見えるように、幅と高さの両方を考慮してどのようにスケール分解するのですか？

<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

あなたは以下のようなコードを含むカスタムスタイルシートを使用することができます。

@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; 
 
    } 
 
}