引导3垂直对齐图像缩略图

我想垂直对齐引导缩略图内的图像。谢谢你的帮助！引导3垂直对齐图像缩略图

<div class="pull-left" style="margin-right: 10px;"> 
       <div class="thumbnail"> 
        <div class="caption" style="background-color: #ccc;"> 
         <a style="color: black;" href="/product/[email protected]">@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>

来源

2014-09-30 alex.davis.dev

[http://stackoverflow.com/questions/23477909/vertically-center-constrained-image-in-bootstrap-thumbnail](http ：/ /问题/ 23434909 /vertically-center-constrained-image-in-bootstrap-thumbnail）检查此答案。这会帮助你 – ujjwal 2014-09-30 18:35:48

我假设你想要使用不同大小的图像来达到这样的效果吗？ enter image description here

我已经看过并寻找一个简单的答案，并没有什么似乎工作得很好，所以我设法采取了几个点，一起破解一些东西。

这有点复杂，但对我来说效果非常好，同时还调整和调整了横向和纵向图像。它还可以让我设置我想要图像的尺寸比例（在“.thumb：before”之前调整填充顶部比例）。

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

Bootply Example at slight portrait ratio (125%)

这需要两个自定义CSS类。

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

由于在嵌入锚标签中嵌入div的方式很差，我还创建了一个'clickable'类，它将内部锚标签，将其大小设置为父容器，并将其浮动到父级上方以便它模仿点击图片。

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

来源

2014-09-30 20:42:18

引导3垂直对齐图像缩略图

回答

相关问题