CSS Normalize images to 4:3 from assorted ratios

Question

The image above shows what happens when i fill my bootstrap image gallery with various images. The html looks like this:

<ul class="row">
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
</ul>

Is there a way to make the images normalize to 4:3 without preproccessing them or making them unresponsive?

Answer 1

You can set the ratio of an element using the percentage padding trick (which is relative to the width of its container)

So you must replace the img elements with a div and set the image as background. Using background-size:cover will scale the image to fill its container without stretching. some cropping will occur of-course*)

So your html becomes

<ul class="row">
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
</ul>

and your CSS

/* CSS used here will be applied after bootstrap.css */
ul{
  list-style:none;
  margin:0;
  padding:0;
}
.ratio-4-3{
  width:100%;
  position:relative;
  background:url() 50% 50% no-repeat;
  background-size:cover;
  background-clip:content-box;
}
.ratio-4-3:before{
    display:block;
    content:"";
    padding-top:75%;
}

Demo at http://www.bootply.com/gpetrioli/thU89Ryoer