Masonry - basic item resizing

re https://github.com/desandro/masonry/issues/98

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div id="container">
    <div class="box">
        <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
    </div>
    <div class="box">
        <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
    </div>
    <div class="box">
        <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
    </div>
</div>

CSS

#container {
    max-width: 580px;
}
.box {
    float: left;
}
.box img {
    width: 100%;
}

JavaScript

$(function () {

    var container = $('#container');

    // Convert .box width from pixels to percent
    $('.box').find('img').each(function () {
        var percent = ($(this).width()) / container.width() * 100;
        $(this).closest('.box').css('max-width', percent + '%');
    });

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
        columnWidth: 1 //widths dividable by 1
    });
});