图像居中砌体网格不能通过浏览器调整大小

Question

我使用砌体在网页上的网格视图中显示图像。为了居中网格容器，我跟着砌体文档和设置如下：

isFitWidth: true 

和

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

这完美的作品。但是，我发现当isFitWidth设置为true时，网格中的图像保持固定在380px（图像的实际大小），并且在浏览器重新调整大小时，它们不会缩小到低于该大小。我能做些什么来使网格容器居中，并允许图像缩小浏览器的大小？

正如您在下面看到的，我正在使用Bootstrap的img-responsive类来处理图像。

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

Answer 1

您需要定义宽度为.grid类。

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

如果你没有得到它。查看此working example。