Html 响应灵敏的gridview布局，提供更宽更高的缩略图

我正在尝试创建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">

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

}