Как уменьшить ширину изображения? Масонство

Question

В основном не знаю, как изменить ширину изображения, чтобы оно выглядело в дизайне.

Я новичок в работе с этой библиотекой, и я хочу знать, как я могу изменить свой пример, как в дизайне.

Среднее изображение меньше, чем два других. Также должны быть сохранены и высота, как все три

У меня есть этот sample

КОД HTML:

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="grid-item item-1"> 
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-01.png" /> 
    </div> 
    <div class="grid-item item-2"> 
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-02.png" /> 
    </div> 
    <div class="grid-item item-3"> 
    <img src="http://bagelhousecafe.ch/wp-content/themes/wp_bagel/assets/img/img-03.png" /> 
    </div> 

</div> 

КОД CSS:

* { 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%; 
} 

КОД JS:

// 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' 
    }); 
}); 

And here is the image

Заранее спасибо!

Answer 1

Незначительные изменения в этих CSS декларации исправит вопрос

.grid-item { 
    width: 33.333%; 
    height: 200px; // Added height 
} 

.grid-item {} // No need of float left 

.grid-item img { 
    min-width: 100%; //defined max-height,max-width & min-height 
    max-width: 100%; 
    max-height: 100%; 
} 

Проверить это codepen