引導程序中的全高並排圖像

Question

我想獲得圖像波紋管中示例的結構。將會有一個完整的寬度爲&的高度容器，裏面有2個圖像和其他元素。我的圖像應該是全高（容器的高度）和容器內的自動寬度（從中心到左邊，分別向右）。我的問題是我的圖像比容器高很多，我需要限制它們在容器內部（紅色區域）以填充容器的整個高度。 PS.1所有圖像都是肖像模式，並且它們都具有相同的高度。 PS.2我看了一下關於Stack的其他問題。 PS.3你得到了here我的非工作例子。

歡迎任何建議。謝謝！

Answer 1

您可以爲所需的結果定義flex。 'justify-content'作爲中心將以相等的邊距在兩邊對齊圖片。

PS。如果要覆蓋整個div，請將50％寬度添加到圖像。

.container { 
 
    width: 100%; 
 
    background: lightgrey; 
 
    height: 300px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.child { 
 
    display: flex; 
 
    width: 100%; 
 
    justify-content: center; 
 
    height: inherit; 
 
} 
 

 
#img1, 
 
#img2 { 
 
    height: 100%; 
 
    align-items: stretch; 
 
}

<div class="container"> 
 

 
    <div class="child"> 
 

 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg" id="img1"> 
 

 

 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/64/07/19/640719d42a8107720d760349fcfbbd52.jpg" id="img2"> 
 

 
    </div> 
 

 
</div>

Answer 2

置容器中，液體和行高度爲100％和刪除類 「IMG響應」。還設置了圖像最大高度：100％，最大寬度：100％

工作代碼

<div class="pop-us-container"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div id="pop-up-1" class="col-sm-6 text-right"> 
      <img src="http://lorempixel.com/1250/1730/"> 
      </div> 
      <div id="pop-up-2" class="col-sm-6 text-left"> 
      <img src="http://lorempixel.com/1250/1730/"> 
      </div> 
     </div> 
     </div> 
    </div> 

和CSS添加

img { 
    max-height:100%; 
    max-width:100%; 
} 
.container-fluid, .row { 
    height: 100%; 
} 

看到一個工作示例here。