如何使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; } }