將Div的大小設置爲與孩子的大小相同（在孩子加載之前）

我有一個父div .photo_container，它包含img，並且延伸至此img的尺寸及其display: inline-block CSS屬性。將Div的大小設置爲與孩子的大小相同（在孩子加載之前）

問題：因爲會有在頁面上許多.photo_container的div和圖像需要一些時間來加載，所有的img加載之前，頁面將充滿了微小的未拉伸的div（帶襯墊的幾個PX ）在擴展以適應每個img，因爲它們一個接一個地加載。

是否可以將div預拉伸到正確的大小，以便當其子img加載時，它不必更改大小？

下面是圖像在圖像加載（醜陋！）和之後的樣子。

enter image description here

代碼：

<div class="photo_box"> 
    <img src="..." /> 
</div>

來源

2012-06-26 Nyxynyx

你確切地知道這些圖片的尺寸是什麼，他們完成加載之前？你事先知道這些信息嗎？ –

在圖像開始加載之前，jQuery無法知道圖像的大小。如果你保留容器元素直到它的圖像加載，至少你不會看到微小的未拉伸的容器框 – jackwanders

我可以知道在圖像加載之前的圖像尺寸，通過將它的尺寸存儲在服務器端的數據庫中...如果我檢索他們的寬度和高度，並插入''，它會幫助嗎？ – Nyxynyx

沒有辦法知道圖像尺寸，除非你實際加載圖像（JS或CSS一樣）。因此，如果使用JS並動態設置容器維度，則無關緊要 - 您仍然需要先加載圖像，因此一段時間後將顯示「醜陋」的空容器。

因此，請將最小大小添加到.photo_container。我看起來至少所有拇指的寬度都是一致的，所以請做一些類似.photo_container { min-width:100px; min-height:50px }的事情。然後爲每個圖像添加一個onLoad回調函數，以便相應調整父級的大小。

如果你使用jQuery，做這樣的事情：

$('.photo_container img').each(function() { 
    $(this).bind('load', function() { 
    var w = $(this).width(), 
     h = $(this).height(); 
    $(this).parent('.photo_container').attr({ width: w+'px', height: h+'px' }); 
    } 
});

來源

2012-06-26 00:56:18

當圖像加載時，瀏覽器應該只是處理事情 - 也許更好地只是通過'.photo_container img'循環並設置尺寸而不是等待加載事件觸發。 – steveax

好吧。如果您使用最小寬度/最小高度（如果它們與圖像不同（尤其是更大）），則需要使用此代碼。 –

啊，gotcha。錯過了 – steveax

將Div的大小設置爲與孩子的大小相同（在孩子加載之前）

回答

相關問題