Wie kann ich das Bild kleiner Breite machen? Mauerwerk

Question

Im Grunde nicht wissen, wie man die Breite des Bildes ändert, so wie es im Design aussieht.

Ich bin neu in der Arbeit mit dieser Bibliothek und ich möchte wissen, wie ich mein Beispiel ändern kann, um wie im Design zu sein.

Das mittlere Bild ist kleiner als die anderen beiden. auch, wie dieses ganze Ich habe

drei erhaltenen und Höhe werden sample

CODE 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 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 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

Vielen Dank im Voraus!

Answer 1

Geringfügige Änderung in dieser CSS-Deklaration behebt das Problem

.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%; 
} 

prüfen diese codepen