如何在响应式网格中将图像显示在同一行时保持图像具有相同的高度/宽度？

我有一个固定宽度的基于％的网格（目前）。代码是基于这个CSS技巧文章：http://css-tricks.com/dont-overthink-it-grids/如何在响应式网格中将图像显示在同一行时保持图像具有相同的高度/宽度？

很好的工作，直到我有一个具有多个响应图像的列中，它有相同的大小，并需要堆叠在一起（浮动）。由于填充问题以及不是，我无法让所有三个图像出现相同的宽度和高度，尽管它们是以这种方式开始的。最后一个总是更高。这里是一个codepen显示的问题：http://codepen.io/joshmath/pen/dEuIv

任何帮助，这将非常感激。我之前遇到过这个问题，并且总是最终以个案为基础对我的方式进行破解。谢谢！

来源

2013-04-24 joshmath

无论出于何种原因，如果从最后一个元素中删除填充右侧：0样式，它将修复问题。

它看起来像你试图在使用填充的元素之间添加间距。我使用Chrome开发工具尝试的是使用边距而不是填充，然后稍微将元素的宽度减小到29.5％左右。这似乎工作。

来源

2013-04-24 17:27:40 seannachie

丫，如果你删除了填充权：0，它解决了这个问题，但是在右边有一个额外的20像素填充，因为该列也有填充权。虽然没有尝试保证金，而且似乎解决了这个问题。非常感谢您的意见！ – joshmath 2013-04-24 19:08:58

只需将以下内容添加到您的CSS。将尺寸设置为任何你喜欢的尺寸，并且网格中的所有图像将保持该尺寸，如果它们需要增大/缩小使用高度/宽度百分比。

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

来源

2013-04-24 17:27:47

我真的希望图片保持响应，而不是为它们声明宽度或高度。虽然谢谢！ – joshmath 2013-04-24 19:09:54

如何在响应式网格中将图像显示在同一行时保持图像具有相同的高度/宽度？

回答

相关问题