响应式图像网格图像大小不一致答案

【问题标题】：Responsive Image Grid Inconsistency in image sizes响应式图像网格图像大小不一致
【发布时间】：2012-11-25 23:31:12
【问题描述】：

我正在创建一个全宽的图像网格，它使用媒体查询来更改图像的列数。你可以在这里看到一个工作演示：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; }

我不会在这里列出媒体查询，但它们所做的只是改变列表项的宽度。

关于为什么会发生这种情况以及如何解决它有什么想法吗？

【问题讨论】：

标签： responsive-design image-scaling css

【解决方案1】：

删除 * 选择器上的边距属性为我解决了这个问题。

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

【讨论】：

那不适合我。看我的回答，解决了。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案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
}

【讨论】：