Displays correctly images with different sizes inside a responsive div

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 -->

     <div class="post-overlay">
      <h3><a href="#">Duisvel eros ac magna rutrum</a></h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel eros ac magna rutrum vulputate vitae...</p>

      <div class="date">
       <strong>23</strong>
       <span>Feb 2014</span>
      </div><!-- /.date -->
     </div><!-- /.post-overlay -->
    </li>

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

     <div class="post-overlay">
      <h3><a href="#">Duisvel eros ac magna rutrum</a></h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel eros ac magna rutrum vulputate vitae...</p>

      <div class="date">
       <strong>23</strong>
       <span>Feb 2014</span>
      </div><!-- /.date -->
     </div><!-- /.post-overlay -->
    </li>

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

     <div class="post-overlay">
      <h3><a href="#">Duisvel eros ac magna rutrum</a></h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel eros ac magna rutrum vulputate vitae...</p>

      <div class="date">
       <strong>23</strong>
       <span>Feb 2014</span>
      </div><!-- /.date -->
     </div><!-- /.post-overlay -->
    </li>

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

     <div class="post-overlay">
      <h3><a href="#">Duisvel eros ac magna rutrum</a></h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel eros ac...

CSS

.main { overflow: hidden; padding-bottom: 200px; }

.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; }
.post-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 14px 16px; color: #fff; opacity: 0; filter: alpha(opacity=0); transition: 0.3s all; }
.post-overlay h3 { padding-bottom: 18px; margin: 0; }
.post-overlay h3 a { font-size: 24px; line-height: 1.35; font-family: 'Intro', sans-serif; text-transform: uppercase; }
.post-overlay p { font-size: 14px; line-height: 1.75; }

.post-overlay .date { position: absolute; bottom: 8px; left: 17px; }

.list-posts li:hover .post-overlay { opacity: 1; filter: alpha(opacity=100); }

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');
      });
    });
  return $(window).on('resize', function() {
    var tid;
    clearTimeout(tid);
    tid = setTimeout(function() {
      $elements.each(function() {
        var obj;
        obj = $(this);
        fitImage(obj, 'li');
      });
    }, 200);
  });
}

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();
});