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

HTML

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

CSS

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