Can't get images to work with masonry/fluid
vedant1811 opened this issue · comments
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?
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.
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.
You are always most welcome to make PRs for better docs in various usage scenarios which require special care. Cheers!