Bootstrap 3 vertical align image in thumbnail - html

Question

I am trying to vertical align an image within a bootstrap thumbnail. Thanks for any help!
<div class="pull-left" style="margin-right: 10px;">
<div class="thumbnail">
<div class="caption" style="background-color: #ccc;">
<a style="color: black;" href="/product/?id=#product.Id">#product.UPC12</a>
</div>
<div style="width: 150px; height: 150px; "> <!-- Center this -->
<a style="" href="#" onclick="showProduct('#product.Id')">
<img class="" src="~/Asset.ashx?id=1253&type=small" />
</a>
</div>
<div style="padding-left: 5px;" class="checkbox">
<label>
#Html.Partial("~/Views/Shared/_ProductImageCheckboxPartial.cshtml", new Logix3.TDC.Exchange.Web.Models.ProductImageModel() { Product = product, Image = defaultImage })
</label>
</div>
</div>
</div>

Answer 1

I assume you wanted to achieve something like this, using different-sized images?
I've looked and looked for a simple answer to this and nothing ever seemed to work well, so I managed to take a few bits and hack something together.
It's a little convoluted but it works really well for me, and also resizes and centers both landscape and portrait images. It also lets me set the dimension ratios I want the image to be (adjust the padding-top percentage in ".thumb:before").
Bootply Example at 1/1 ratio (square). (click on the image to see the original)
Bootply Example at slight portrait ratio (125%)
This needs two custom css classes.
The 'thumb' class is assigned to the div and the image url is set as a background.
Since it's poor form to embed a div inside an anchor tag, I also created a 'clickable' class, which takes the inside anchor tag, sizes it to the parent container, and floats it above the parent so that it mimics clicking the image.
HTML:
<div class="col-xs-1">
<div class="clickable thumb" style="background-image: url('http://auduno.github.io/clmtrackr/media/audrey.jpg')">
<a href="http://auduno.github.io/clmtrackr/media/audrey.jpg">
</a>
</div>
<div class="text-center"><small>Product 15</small></div>
</div>
CSS:
.thumb{
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
position:relative;
width:100%;
border:1px solid #BBB;
}
.thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.clickable > a{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
/* For IE */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
//from http://blog.avtex.com/2012/01/27/how-to-make-an-entire-div-clickable-with-css/
}