CSS Normalize images to 4:3 from assorted ratios
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