Question

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

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。

中心砌体网格中的图像无法随浏览器调整大小

1 个答案: