Can't get images to work with masonry/fluid

[vedant1811]

I have the following code:

In application.js:

//= require masonry/jquery.masonry

application.scss:

@import 'masonry/fluid';

<h1>Masonry + imagesLoaded, iteratively reveal items</h1>

<div id="masonry-container" class="centered masonry">
  <%= render @collection.models %>
</div>

_model.html.erb:

<div class="box">
  <%= image_tag(model.photos.first.photo.url(:medium)) %>
</div>

js.erb:

$(document).ready(function() {

    $('#masonry-container').masonry({
        itemSelector: '.box',
        // set columnWidth a fraction of the container width
        columnWidth: function( containerWidth ) {
            return containerWidth / 3;
        }
    });
});

But the images (usually much larger than containerWidth / 3) take up more space and the entire layout is messed up. Passing width: 300 in the image_tag prevents this, but defeats the purpose of a fluid width.

How can I get this to work?

[kristianmandrup]

Sounds like something specific to Masonry configuration, maybe an addon/plugin for masonry? See if you can find Masonry solutions/examples that function the way you desire with respect to automatic image resize.

[Judahmeek]

Some more information about how the layout is incorrect would be useful. If you have a fixed containerWidth and images larger than the desired columnWidth, than you'll at least need a max-width percent constraint in order to eliminate overflow effects.

[kristianmandrup]

You are always most welcome to make PRs for better docs in various usage scenarios which require special care. Cheers!