I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around.
<div class="container">
<div class="row row-eq-height" ng-repeat="images in main.slicedImages">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" ng-repeat="image in images">
<div class="hovereffect" ng-click="selected = !selected">
<img ng-class="{ 'selected_image': selected }" ng-src="{{image.img}}" class="img-responsive stretch_image">
<div class="overlay">
<a class="info" ng-bind="image.name"></a>
</div>
<a class="selected_text" ng-show="selected">SELECTED</a>
</div>
</div>
</div>
</div>
Currently, the layout looks like this: https://i.stack.imgur.com/u5nhb.png I would like the rows to adjust to the size of the images on the right, even if it means cropping larger images rather than resizing them.