引導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垂直對齊圖像縮略圖

回答

相關問題