Masonry的响应式布局在更大的页面尺寸上有很大的排水沟

Question

我的网站上有一个图片库样式部分。我正在使用Masonry进行图像布局。在大多数情况下，它看起来不错。

但是，当将页面扩展到更大的分辨率时，前两列之间的装订线有时会变宽。

像这样：

这不是我想要的。理想情况下，我总是希望图像之间有小的边距，就像一个灵巧的布局。帮助

相关代码如下：

JS：

list-style-type

的CSS：

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer',
  gutter: 5,
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});  

HTML / Blade（使用laravel）

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: calc(33.3333% - 5px);
}
.grid-item {
  float: left;
  margin-bottom: 5px;
}
.grid-item img {
  display: block;
  max-width: 100%;
}
.grid-item:hover img {
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;    
}

Answer 1

看起来您的图像已达到其原始分辨率，并且不再扩展以适应细胞。我猜你有一些CSS可以让他们做出回应，比如max-width: 100%;。在max-width: 100%;的情况下，我们说图像可以占用但不超过其容器允许的空间。如果图像的宽度大于父图像，则缩小图像。如果图像的宽度小于父图像，则图像将保持不变，因为图像不再大于或等于父图像的宽度。

提高源图像的大小或允许它们扩展超出其原始大小（将发生像素化）。

我的答案不包括/使用砌体，因为我不认为这是一个砌体问题，而是CSS和图像实现问题。

我认为你的情况正在发生的例子。

＆＃13;

＆＃13;

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例1修复 - 允许图像扩展超出原生大小

＆＃13;

＆＃13;

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  /* max-width: 100%; */
  width: 100%;
  height: auto;
}

＆＃13;

<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例2修复 - 更大的图像

＆＃13;

＆＃13;

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="container">
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;