【发布时间】：2017-09-18 16:53:23
【问题描述】：
我使用引导程序设计了一个图像网格，使用的图像要么是 360px 正方形，要么是 360px 高 x 720px 宽。出于某种原因，宽幅图像在行中显示得更高。知道为什么会发生这种情况以及如何解决吗？
谢谢！
【问题讨论】：
-
根据示例，它似乎将图像缩小了一点
标签： html css image twitter-bootstrap gallery
【发布时间】：2017-09-18 16:53:23
【问题描述】：
图像不会仅仅因为它们具有相同的物理高度而以相同的高度显示，因为它们会随着您的布局进行缩放。并且每列中的填充和列中的元素减少了图像可用的水平空间，当水平尺寸发生变化时，垂直尺寸也会发生变化（以正确缩放图像）。
看看左/宽图是怎么只有一列的，而右边的2张图是2列的。右侧的 2 个图像中的填充比左侧多（填充的两倍，因为图像的数量是两倍）。这是将每个的高度缩放为比左边的图像短。
我从 .col-* 类和 .thumbnail 中删除了填充，以表明如果删除它们，图像会对齐。
http://www.bootply.com/KacXrRCbYH
您可以通过多种方式解决此问题，但我认为这需要您自己决定什么最适合您的布局。最简单的方法可能只是更改左侧图像的高度以考虑该填充。 720x341 似乎是在那里工作的分辨率。
【讨论】：
-
谢谢，这很有帮助。虽然调整图像高度看起来很老套，但这可能是最简单的方法。
-
@Martin 这有什么奇怪的？你必须以某种方式抵消空间。这不是 hacky，这是数学 :)
-
好点。我的想法是在调整窗口大小时它可能无法完美对齐，但看起来还不错。再次感谢！