Update: To see a demonstration, visit: http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview. Please ensure the "preview" window is wide enough to avoid responsive layout issues.
I am currently working with Twitter Bootstrap's thumbnails and thumbnail classes to create an image gallery effect. However, I'm facing challenges in aligning the images properly within the grid.
All thumbnails retrieved from the server are uniformly scaled to fit into 200px X 200px containers. Despite this uniformity, some images end up wider than they are tall (e.g., 200px X 100px), while others may be taller than they are wide (e.g., 100px X 200px). My goal is to vertically and horizontally center all images within their respective rows. For example, in the following scenario:
I would like the images testImage, testImage2, and testImage3 to be adjusted within their containers so that the image tags are aligned.
Below is the HTML code snippet (including AngularJS bindings) being used:
<div class="container" ng-controller="StaticDataManagementCtrl">
<div class="row">
<div class="span12">
<tabset>
<tab heading="Text" select="loadTextLibrary()">
<div class="row"></div>
</tab>
<tab heading="Images" select="loadImageLibrary()">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" ng-repeat="image in staticImages">
<div class="thumbnail">
<img ng-src="/api/static/images/{{image._id}}/thumb">
<h3>{{image.name}}</h3>
<p>Some sample description</p>
</div>
</li>
</ul>
</div>
</tab>
<tab heading="Health Mark" select="loadHealthMarkLibrary()"></tab>
</tabset>
</div>
</div>
</div>