Column fixed heigth - keep image aspect ratio? - html

Question

My code is here: JSFiddle (I am working with Bootstrap 3)
Basically, my problem is I can't get the images in the columns to keep their aspect ratio, probably because the column height is fixed.
If I remove:
img {
width: 100%;
height:100%;
}
the images simply get cropped...
The column size is fixed, because I want the entire body of the page to fit the window vertically and have no scroll bar, since I am working on a desktop application and the only solution I found is to define everything in Viewport units.
I'm not sure I'm even on the right track, trying to define everything in vh/vw? Maybe there is another way?
This is very roughly speaking (or drawing..) what I want to achieve in the end: Layout
Any input at all would be greatly appreciated.

Answer 1

Use divs instead if img-tags and give them the image src as a background url. You can then set background-size to contain of 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>