响应式网格布局：Img高度在较小的视口大小上不同

Question

我正在制作一个基于bootstrap的新网站：Link。主页包含一个包含大量不均匀列的网格系统。见下图：

问题在于，在不同的视口宽度上，图像的高度会按比例缩小。见下面的第二张图片......

我该如何解决这个问题？我希望所有的imgs始终保持相同的高度，以便行之间的边距保持不变。

感谢您的帮助！

Answer 1

您可以根据此处的示例进行操作。

参见示例。 http://codepen.io/desandro/pen/dPzpBd

HTML

<div class="grid">
<div class="grid-sizer"></div>
<div class="item large h2">40%</div>
<div class="item small h2">25%</div>
<div class="item medium">35%</div>
<div class="item medium h2">35%</div>
<div class="item small">25%</div>
<div class="item large">40%</div>
</div>

CSS

* { box-sizing: border-box; }

.grid-sizer { width: 5%; }

.item {
float: left;
background: #D10;
height: 100px;
border-right: 2px solid white;
border-bottom: 2px solid white;
font-size: 36px;
color: white;
}
.item.small { width: 25%; }
.item.medium { width: 35%; }
.item.large { width: 40%; }
.item.h2 { height: 150px; }

JS

$('.grid').masonry({
itemSelector: '.item',
columnWidth: '.grid-sizer'
});

Answer 2

您需要确保每12 row有一个cols。

现在你在一行中有太多的列。

遵循container＆gt;的结构row＆gt; col。