Question

我正在创建一个全宽度的图像网格，使用媒体查询来更改图像的列数。您可以在此处查看有效的演示：http://vitaminjdesign.com/grid/

使用img{max-width: 100%}图像拉伸到其容器的宽度。这很好用，演示正在运行。如您所见，每张图像之间应该有1px的空间。我正在使用边框模型，因此使用padding-right创建空间。

但是，如果您调整窗口大小，您会注意到图像之间的1px边距有时会发生变化，并且图像之间/之下的白色空间似乎不一致。

在检查每个图像时，浏览器正在以略微不同的大小呈现图像（1px差异，但不多）。这会产生这些不均匀的线条问题是，如果每个图像的大小完全相同，那么它们如何以略微不同的大小呈现（这会导致这种布局问题）？如果你检查每个图像，你会发现尺寸有时是不同的，有时是相同的（取决于屏幕宽度）。

下面的CSS：

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #work{width:100%; clear:left;}
    #work li{width:20%; height:auto; padding-right: 1px;  padding-bottom: 1px; float:left; position: relative;  transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
    #work li a{display: block; position: relative; width: 100%; height: auto;}
    #work li img{display: block; max-width: 100%; height: auto; }

我不会在此处列出媒体查询，但他们所做的只是更改列表项的宽度。

有关为何发生这种情况以及如何解决问题的想法？

Answer 1

删除*选择器上的margin属性可以解决我的问题。

* {
  -moz-box-sizing: border-box;
  font-weight: normal;
  padding: 0;
}

Answer 2

问题是因为每个列表项都有计算的宽度。因为除了最后一列之外的所有列都有一个填充右边/右边边框，它们实际上具有不同的宽度，从而使图像具有不同的宽度/高度。通过删除列的最后一项上的零填充/边框规则，所有图像都具有完全相同的宽度和高度。

Answer 3

问题在于您的媒体查询和第n个子选择器。但我不确定为什么设置border-right: none;为网格增加1px的高度。要解决此问题，只需删除此选择器中的border-right: none;：

#work li:nth-child(3n+3) {
   border-right: none; //Delete this
}


#work li:nth-child(2n+2) {
   border-right: none; //Delete this
}

响应式图像网格图像尺寸不一致

3 个答案: