响应式gridview布局更宽更高的缩略图

Question

我正在尝试创建gridview布局。但在显示图像时遇到困难。有些图像较长，有些图像较宽，因此我的整体设计看起来很难看。

你可以在截图中看到。 我希望他们留在同一排/盒子里。

HTML

<div class="my-gallery thumb" id="grid" data-pswp-uid="1">
<!-- ngRepeat: imageUrl in images --><div ng-repeat="imageUrl in images" class="col-xs-3 ng-scope">

    <figure>
    <a href="87.jpg" class="thumbnail " data-size="800x600"> 
    <img src="a.jpg" class="img-responsive " ng-src="a.jpg" height="100" width="100">
    </a>
    </figure>

</div><!-- end ngRepeat: imageUrl in images --><div ng-repeat="imageUrl in images" class="col-xs-3 ng-scope">

    <figure>
    <a href="78.jpg" class="thumbnail " data-size="800x600"> 
    <img src="b.jpg" class="img-responsive " ng-src="b.jpg" height="100" width="100">
    </a>
    </figure>

</div><!-- end ngRepeat: imageUrl in images --><div ng-repeat="imageUrl in images" class="col-xs-3 ng-scope">

    <figure>
    <a href="70.jpg" class="thumbnail " data-size="800x600"> 
    <img src="c.jpg" class="img-responsive " ng-src="c.jpg" height="100" width="100">
    </a>
    </figure>

</div><!-- end ngRepeat: imageUrl in images --><div ng-repeat="imageUrl in images" class="col-xs-3 ng-scope">

CSS

div.thumb {
     float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    margin-right: 9px;
    position: relative;
     border: 1px solid #ccc;

}