How to place images using jQuery masonry plugin to start

Question

Trying to create a simple image gallery for images of varying height/width and ran into masonry in search of a plugin that does something like that.

I was trying to do a mockup of this based on other example of empty box layout on masonry but I can't figure out how you would do this to place image in these boxes.

http://jsfiddle.net/zigzag/kz2b79s3/

This is how I organized one tile:

 <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>

As you can see in the fiddle, the image is 'bleeding' out instead of being contained in the box. Must have missed something silly here.

Answer 1

You were just missing a css class that adjusts the image according to its parent container

.item img {
  display: block;
  width: 100%
}