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
Post a Comment