html - Images in centered Masonry grid do not scale with browser resize -


i'm using masonry displaying images in grid view on webpage. in order center grid container, i've followed masonry documentation , set following:

isfitwidth: true 

and

/* center container css */ .grid {   margin: 0 auto; } 

this works perfectly. however, i'm finding when isfitwidth set true, images in grid stay fixed @ 380px (the actual size of images), , not scale down below size browser re-sizes. can have grid container centered , allow images scale down in size browser does?

as can see below, using bootstrap's img-responsive class images.

html:

<div id="container">         <div class="grid">             <div class="grid-item"><img class="img-responsive" src="images/small/8.jpg" alt="image"></div>             <div class="grid-item"><img class="img-responsive" src="images/small/17.jpg" alt="image"></div>             ... 

css:

.grid-item {   float: left;   /*border: 1px solid #000;*/   overflow:hidden;   margin-bottom: 10px; }  .grid-item > * {   margin: 0;   padding: 0; }  .grid {   /* center */   margin: 50px auto; }  /* clear fix */ .grid:after {   content: '';   display: block;   clear: both; } 

you need define width .grid class.

.grid{margin:0px auto; width:90% } 

in case not it. view working example.


Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -