引導CSS - 圖像容器高度符合寬度

我有一個引導的網站，從數據庫中動態地加載內容和lazyload是使用這個jQuery插件的圖像 - LazyLoad 引導CSS - 圖像容器高度符合寬度

它使用一個佔位符，這是一個白色的方形PNG。在圖像加載之前（當佔位符可見時）圖像容器看起來如何我想要它，當圖像完全加載時它看起來也很好。然而當圖像加載佈局倒塌像這樣：

enter image description here

有沒有一種方法來設置圖像容器的高度與寬度？由於它是一個響應網站，寬度將根據分辨率而變化。如果這有道理？

<div class='col-xs-6 col-sm-3 col-md-3'> 
    <div class='thumbnail'> 
    <a href='my_url.html'><img class = 'lazy' data-original='http://external.png' alt='product_name'></a> 
    <div class='caption' style = 'text-align: center;'> 
     <div style = 'height: 60px;'>product_name<br /> 
      &pound;product_price</div> 
     <p style = 'padding-top: 10px;'><a href='my_url.html' class='btn btn-primary btn-thumbp' role='button'>View</a> <a href='#' class='btn btn-default btn-thumbd' role='button'>Wishlist</a></p> 
    </div> 
    </div> 
</div>

來源

2015-04-20 Lee

純CSS響應的解決方案是通過利用以下事實padding-top百分比是指所述元件的寬度的優點成爲可能。

.thumbnail { 
    outline: solid 1px blue; 
    width: 250px; /* Any width */ 

} 

.image { 
    width: 100%; 
    display: inline-block; 
    position: relative; 
    outline: solid 1px red; 
} 

.image:after { 
    padding-top: 100%; 
    display: block; 
    content: ''; 
}

這裏有一個簡短的演示：http://jsbin.com/lohoxa/5/edit

來源

2015-04-20 12:43:11

引導CSS - 圖像容器高度符合寬度

回答

相關問題