html - Bootstrap 3 垂直对齐图像缩略图

Question

我正在尝试在 Bootstrap 缩略图中垂直对齐图像。感谢您的帮助!

<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

我假设您想使用不同大小的图像来实现这样的目标？

我一直在寻找一个简单的答案，但似乎没有一个能很好地工作，所以我设法采取一些措施并将一些东西组合在一起。

它有点复杂，但对我来说效果很好，还可以调整横向和纵向图像的大小和居中。它还可以让我设置我想要的图像尺寸比率(调整“.thumb:before”中的 padding-top 百分比)。

Bootply Example at 1/1 ratio (square). (点击图片查看原文)

Bootply Example at slight portrait ratio (125%)

这需要两个自定义 css 类。

'thumb' 类被分配给 div，图像 url 被设置为背景。

由于将 div 嵌入 anchor 标记内的形式很差，我还创建了一个“可点击”类，它采用内部 anchor 标记，将其调整到父容器的大小，并将其 float 在父容器上方，以便模拟点击图片。

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