Bootstrap 3垂直对齐缩略图中的图像

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/
}