How can I make the image smaller width? Masonry <p>Basically not know how to change the width of the image so it looks like in design.</p> <p>I'm new to working with this library and I want to know how I can change my example to be like in design.</p> <p>The middle image is smaller than the other two. Also to be preserved and height as all three</p> <p>I have this <a href="http://codepen.io/anon/pen/mEVoJo" rel="nofollow">sample</a></p> <p><strong>CODE HTML:</strong></p> <pre><code>&lt;div class="grid"&gt; &lt;div class="grid-sizer"&gt;&lt;/div&gt; &lt;div class="grid-item item-1"&gt; &lt;img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-01.png" /&gt; &lt;/div&gt; &lt;div class="grid-item item-2"&gt; &lt;img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-02.png" /&gt; &lt;/div&gt; &lt;div class="grid-item item-3"&gt; &lt;img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-03.png" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CODE CSS:</strong></p> <pre><code>* { box-sizing: border-box; } /* force scrollbar */ html { overflow-y: scroll; } body { font-family: sans-serif; } /* ---- grid ---- */ .item-1,.item-3{ width:40%; } .grid { background: #DDD; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer, .grid-item { width: 33.333%; } .grid-item { float: left; } .grid-item img { display: block; width: 100%; } </code></pre> <p><strong>CODE JS:</strong></p> <pre><code>// external js: masonry.pkgd.js, imagesloaded.pkgd.js // init Masonry after all images have loaded var $grid = $('.grid').imagesLoaded( function() { $grid.masonry({ itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' }); }); </code></pre> <p><a href="http://i.stack.imgur.com/KlhCd.jpg" rel="nofollow">And here is the image</a></p> <p>Thanks in advance!</p>