居中的 Masonry 网格中的图像不会随着浏览器调整大小而缩放

Question

我正在使用 Masonry 在我的网页上以网格视图显示图像。为了使网格容器居中，我遵循了 Masonry 文档并设置了以下内容：

isFitWidth: true

和

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

这非常有效。但是，我发现当 isFitWidth 设置为 true 时，网格中的图像保持固定在 380 像素（图像的实际大小），并且随着浏览器重新调整大小，它们不会缩小到该大小以下。我该怎么做才能使网格容器居中并允许图像像浏览器一样按比例缩小？

如下所示，我正在使用 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 类定义 width。

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

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