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="#" style="background-image: url(http://placehold.it/400x266);"></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="#" style="background-image: url(http://placehold.it/400x266);"></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="#" style="background-image: url(http://placehold.it/175x266);"></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="#" style="background-image: url(http://placehold.it/175x266);"></a>
<div class="caption"> ...
CSS
.thumbnail > a {
display: block;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
height: 266px;
}