响应式网格布局：Img 高度在较小的视口尺寸上缩放不同答案

【问题标题】：Responsive Grid-layout: Img height scales different on smaller viewport sizes响应式网格布局：Img 高度在较小的视口尺寸上缩放不同
【发布时间】：2017-04-16 02:38:55
【问题描述】：

我正在基于引导程序创建一个新站点：Link。主页包含一个网格系统，其中包含许多不均匀的列。见下图：

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

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

感谢你们的帮助！

【问题讨论】：

标签： jquery css twitter-bootstrap-3 grid-layout

【解决方案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; }

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

【讨论】：

【解决方案2】：

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

现在单行中有太多列。

遵循container > row > col的结构。

【讨论】：