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

Question

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

isFitWidth: true

和

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

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

正如您在下面看到的，我正在为图像使用 Bootstrap 的 img-responsive class。

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 class.

定义 width

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

以防你不明白。查看此 working example.

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

Images in centered Masonry grid do not scale with browser resize

html

css

twitter-bootstrap

twitter-bootstrap-3

masonry