圖像大小的響應式圖像網格不一致

我正在創建使用媒體查詢來更改圖像數量的圖像列的全寬網格圖像。你可以在這裏看到一個工作演示：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

圖像大小的響應式圖像網格不一致

回答

相關問題