testing in a row images

Displays correctly images with different sizes inside a responsive div without distort the images and break the layout div blocks

by heriberto perez

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
 <div class="main">
  <div class="posts">
   <ul class="list-posts">
    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/600/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/400/300" alt="" />
     </div><!-- /.post-image -->     
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/400/400" alt="" />
     </div><!-- /.post-image -->     
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/600/600" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/200/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/200/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

   </ul><!-- /.list-posts -->
  </div><!-- /.posts -->
 </div><!-- /.main -->

CSS

.posts { padding: 9px 5px; }
.list-posts {   overflow: hidden; padding: 0; list-style: none outside none; }
.list-posts li {
  display: none;
  float: left;
  height: 0;
  margin: 0px .33% .33% .33%;
  overflow: hidden;
  padding-bottom: 24%;
  position: relative;
  width: 24%;
}

.post-image img { width: 100%; height: auto; }

JavaScript

var fillDivWithImage = function() {
  var $elements;
  $elements = $('.post-image img');
  $elements.imagesLoaded(function() {
    $('.list-posts li').fadeIn();
      return $elements.each(function() {
        var obj;
        obj = $(this);
        fitImage(obj, 'li');
    });
  });
}

var fitImage = function(obj, parent) {
  var diff, imageHeight, imageWidth, leftOffset, parentHeight, parentWidth, topOffset;
  parentWidth = obj.parents(parent).width();
  parentHeight = parentWidth;
  imageWidth = obj.width();
  imageHeight = obj.height();
  diff = imageWidth / parentWidth;
  if ((imageHeight / diff) < parentHeight) {
    obj.css({
      width: 'auto',
      height: parentHeight
    });
    imageWidth = imageWidth / (imageHeight / parentHeight);
    imageHeight = parentHeight;
   } else {
     obj.css({
       height: 'auto',
       width: parentWidth
     });
     imageWidth = parentWidth;
     imageHeight = imageHeight / diff;
   }
   leftOffset = (imageWidth - parentWidth) / -2;
   topOffset = (imageHeight - parentHeight) / -2;
   obj.css({
     'margin-left': leftOffset,
     'margin-top': topOffset
   });
 }

$(function() {
  fillDivWithImage();
});