カラム固定高さ - 画像のアスペクト比を維持しますか？

Question

私のコードはここにある：JSFiddle（私はブートストラップ3で働いています）

基本的に、私の問題は、私は、列の高さが固定されているためか、彼らのアスペクト比を維持するために列の画像を得ることができないです。

は私が削除した場合：

img { 
width: 100%; 
height:100%; 
} 

画像が単にトリミングを取得...

列のサイズが固定されて、私はノーウィンドウを垂直方向に合わせて、持っているページの全体の体をしたいので、私はデスクトップアプリケーションで作業しているので、私が見つけた唯一の解決策はViewport単位ですべてを定義することです。

vh/vwのすべてを定義しようとすると、私は正しい軌道に乗っているのか分かりませんか？多分別の方法がありますか？

これは非常に大まかに言えば（または描画...）されて、私は最終的に達成するために欲しいもの：Layout

すべての任意の入力をいただければ幸いです。

Answer 1

imgがタグを付けて、画像srcに背景URLを指定した場合は、代わりにdivを使用してください。 background-sizeをcontainに設定してcoverに設定することができます。あなたが実際に必要なもの

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
html, body{ 
 
    height:100vh; 
 
    overflow:hidden; 
 
} 
 

 
.container-fluid { 
 
    height: 80vh; 
 
    width: 90vw; 
 
    overflow-y:hidden; 
 
} 
 

 
.col-lg-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
.col-md-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
.col-s-6 { 
 
    height: 32vh; 
 
    overflow:hidden; 
 
} 
 

 
img { 
 
width: 100%; 
 
    height:100%; 
 
} 
 

 
#img-1 { 
 
    background: url(http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg) center center no-repeat; 
 
    background-size: contain; 
 
    height: 100%; 
 
} 
 

 
#img-2 { 
 
    background: url(http://noliesradio.org/wp/wp-content/uploads/2014/02/introslide.JPG_.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    height: 100%; 
 
}

<div class="container-fluid"> 
 
<div class="row"> 
 
     <div class="row"> 
 
      
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <div id="img-1" src="http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <div id="img-2"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
      
 
    <div class="col-lg-6 col-md-6 col-s-6"> 
 
     <img src="http://www-static.weddingbee.com/pics/52547/jacaranda.jpg"> 
 
    </div> 
 
             
 
    <div class="col-lg-6 col-md-6"> 
 
     <img src="http://www.paramountplants.co.uk/images/evergreen-screening/acer-palmatum-dissectum-garnet-specimen-tree.jpg"> 
 
    </div> 
 
    </div> 
 
    </div>