angularchobo angularchobo - 3 months ago 11
CSS Question

Column fixed heigth - keep image aspect ratio?

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

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>

Comments