ブートストラップの高さの並んだ画像

Question

画像に例示されている構造を取得したいと思います。 2つの画像と他の要素が内部にあるフルハイトの&高さのコンテナがあります。私の画像は、コンテナの高さ（コンテナの高さ）とコンテナ内の自動幅（中央から左、それぞれ右に伸びる）でなければなりません。私の問題は、私のイメージがコンテナよりもはるかに高いということです。コンテナ内にあるように（赤い領域）、それを何とかして制限する必要があります。 PS.1すべての画像はポートレートモードで、すべてが同じ高さです。 PS.2スタックに関する他の質問を見ました。 PS.3あなたはhere私の非実際の例を得た。

ご提案は大歓迎です。ありがとうございました！

Answer 1

希望する結果にフレックスを定義することができます。 「正当化 - コンテンツ」を中心に、両面に均等に画像を配置します。

PS。 div全体をカバーしたい場合は、画像に50％の幅を加えます。高さの容器流体と行100％に設定し、クラス "IMG応答" を削除

.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

。

<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を参照してください追加し、100％

の作業コード：100％と最大幅：また、最大の高さに画像を設定します。