如何在響應式網格中將圖像顯示在同一行時保持圖像具有相同的高度/寬度？

Question

我有一個固定寬度的基於％的網格（目前）。代碼是基於這個CSS技巧文章：http://css-tricks.com/dont-overthink-it-grids/

很好的工作，直到我有一個具有多個響應圖像的列中，它有相同的大小，並需要堆疊在一起（浮動）。由於填充問題以及不是，我無法讓所有三個圖像出現相同的寬度和高度，儘管它們是以這種方式開始的。最後一個總是更高。這裏是一個codepen顯示的問題：http://codepen.io/joshmath/pen/dEuIv

任何幫助，這將非常感激。我之前遇到過這個問題，並且總是最終以個案爲基礎對我的方式進行破解。謝謝！

Answer 1

無論出於何種原因，如果從最後一個元素中刪除填充右側：0樣式，它將修復問題。

它看起來像你試圖在使用填充的元素之間添加間距。我使用Chrome開發工具嘗試的是使用邊距而不是填充，然後稍微將元素的寬度減小到29.5％左右。這似乎工作。

Answer 2

只需將以下內容添加到您的CSS。將尺寸設置爲任何你喜歡的尺寸，並且網格中的所有圖像將保持該尺寸，如果它們需要增大/縮小使用高度/寬度百分比。

.grid img { width：350px; height：400px; }