圖像加載時保持div高度

Question

我在.img-container內有一個方形圖像。有時需要幾秒鐘的時間才能加載圖像，並且.img-container會崩潰，並且僅在圖像加載時纔會佔用全部高度。但是，我希望它在圖像加載時保持全高（就像圖像在那裏）。

我會通過img-container類中設置min-height已經很容易做到這一點，但是這是一個流體網格，圖像響應（注意引導的img-responsive輔助類），這使得它很難在最小高度設置爲一個適當的值針對不同的屏幕尺寸（雖然可以通過媒體查詢作爲最後手段實現）。 通過放置一個佔位圖像來解決這個問題聽起來像是一種矯枉過正（尤其是在移動設備上的性能表現）。此外，不知道先載入哪些內容，佔位符圖像或實際圖像。

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> 
    <div class="card"> 
     <span class="img-container thumbnail clearfix"> 
     <img alt class="pull-left img-responsive" src="http://..."> 
     </span> 
     <div class="caption"> 
     <a href="http://.." class="card-title lead"> 
      Some text 
     </a> 
     </div> 
    </div> 
    </div> 

Answer 1

編輯DUE發表評論

如果不指定所有源（甚至不是一個虛擬的，暫時的），瀏覽器甚至不會嘗試「猜測」圖像的高度，所以它崩潰。如果您知道圖像的比例（在方形圖片的情況下明顯是1：1），則可以使用以下技巧來預佔空間，並將圖像與div一起縮放。

設置以下CSS：

.test-div-inner { 
    padding-bottom:100%; 
    background:#EEE; 
    height:0; 
    position:relative; 
} 
.test-image { 
    width:100%; 
    height:100%; 
    display:block; 
    position:absolute; 
} 

然後你可以用下面的HTML：

<div class="test-div-inner"> 
    <img class="test-image" src="http://goo.gl/lO9SUU"> 
</div> 

這裏是工作示例：http://jsfiddle.net/pQ5zh/3/

注意，小提琴包含另一個div元素，只有在您想要填充所有填充或邊框時才需要，因爲padding-bottom根據div的寬度計算填充像素，包括這些參數，這不是我們想要實現的效果（圖像會比應該高一些）。

對於非正方形圖片：

如果你想改變圖片的比例，只是改變了容器div的padding-bottom相應。例如，如果您想以2：1的比例放置圖像，請將填充更改爲50%。爲了保持簡短：容器div的寬度和填充的比例應始終等於圖像寬度和高度的比率。

---

有一個簡單的方法來做到準確這一點，但它僅適用於正方形圖像。
指定圖像的寬度（使用CSS）爲100％。這樣瀏覽器就會自動假定圖像的高度與寬度相同，並且佔據這個位置。

http://jsfiddle.net/pQ5zh/2/

.test-image { 
    width:100%; 
} 

注：有一種方法可以達到這一目的的非正方形圖片太多，但就是有點複雜。

編輯：見上。

Answer 2

好吧，假設所有圖像都是方形的，我們可以做到。添加一個額外的div在你的形象是這樣的：

<div class="img-container"> <div class="image-wrap">IMAGE HERE</div> </div>

然後我們要沿着

.img-container { 
position:relative; 
background: #ccc; 
width:200px; /* Remove this width */ 
color:#000; 
} 

.img-container:before{ 
content: ""; 
display: block; 
padding-top: 100%; 
} 

.image-wrap { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
} 

行CSS在操作中查看： http://jsfiddle.net/jamesking/LNvmY/

你會想刪除寬度設置在.img-container