Question

我正在尝试在引导缩略图中垂直对齐图像。谢谢你的帮助！

<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

我假设您想要使用不同尺寸的图像来实现这样的效果？ enter image description here

我一直在寻找并寻找一个简单的答案，似乎没有任何效果，所以我设法拿了一些东西并一起破解。

它有点令人费解但它对我来说效果很好，并且还调整了景观和肖像图像的大小和中心。它还允许我设置我想要图像的尺寸比率（在＆＃34中调整填充顶部百分比; .thumb：在＆＃34之前;）。

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

Bootply Example at slight portrait ratio (125%)

这需要两个自定义css类。

拇指＆＃39; class被分配给div，图像url被设置为背景。

由于在一个锚标签中嵌入一个div很糟糕，我还创建了一个可点击的＆＃39; class，它接受内部锚标记，将其调整为父容器，并将其浮动到父容器上方，以便模仿单击图像。

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

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

1 个答案: