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

我正在创建使用媒体查询来更改图像数量的图像列的全宽网格图像。你可以在这里看到一个工作演示：http://vitaminjdesign.com/grid/图像大小的响应式图像网格不一致

使用img{max-width: 100%}图像拉伸到其容器的宽度。这很好，演示正在工作。正如你所看到的，每个图像之间应该有1px的空间。我正在使用边框模型，因此通过使用填充右键来创建空间。

但是，如果调整窗口大小，您会注意到图像之间的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; }

我就不一一列举在这里的媒体查询，但他们做的是改变列表项的宽度。

有关为什么会发生这种情况以及我如何修复它的任何想法？

来源

2012-12-07 JCHASE11

问题出在您的媒体查询和第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 
}

来源

2012-12-07 19:40:37

谢谢，是的，这是做到了 – JCHASE11

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

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

来源

2012-12-07 19:24:38

这不适合我。看到我的答案，修复它。谢谢！ – JCHASE11

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

来源

2012-12-07 19:28:44 JCHASE11

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

回答

相关问题