圖像居中砌體網格不能通過瀏覽器調整大小

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。