JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12">
<h1 class="page-header text-center">Photos</h1>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/175x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/175x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
...
CSS
.thumbnail > a {
display: block;
height: 200px;
/* for center alignment */
position: relative;
}
.thumbnail > a > img {
max-width: 100%;
max-height: 100%;
/* for center alignment */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}