使用jQuery根據％寬度設置CSS的高度

Question

所討論的頁面本質上是一個圖像網格，無論窗口的大小如何，它總是三個。

圖像來自WordPress的帖子，每個人都有自己的容器與溢出：隱藏。容器divs設置爲css，寬度爲33.33％。我在ready（）和window resize上使用jQuery來設置容器div的高度等於它們的寬度。

的HTML/PHP的結構是這樣的：

<div class="collectionPostContainer"> 
        <div class="collectionImageHolder"> 
         <img src='<?php the_field('photo'); ?>'/> 
        </div> 
</div> 

JS的功能如下：

function resizeEntryHeight(){ 
windowWidth = $(window).width(); 
$('.collectionPostContainer').each(function(){ 
    $(this).css('height',$(this).width()+''); 
}); 

}

的問題是，當第一次加載頁面時，前四個條目每個被分配一個比以下條目略高的高度，在第三排放下網格。只要我在控制檯中調用函數或再次調整窗口大小，高度就會固定，並且都是平等的。

在多個開始窗口大小的Firefox和Chrome上進行測試。奇怪的是，前四個條目的高度總是比後面的條目高出5px。

所以我想知道爲什麼表面上具有相同寬度的元素在同一個循環內被分配了不同的高度，以及如何讓我的漂亮的圖像網格。

希望這是明確的！

謝謝。

Answer 1

您可以使用此jQuery插件：https://github.com/karacas/imgLiquid

Answer 2

這必須爲你工作

var resizeEntryHeight=function(){ 
$('.collectionPostContainer').each(function(){ 
    $(this).css('height',$(this).width()+'px'); 
}); 
} 

$(document).ready(function(){ 
resizeEntryHeight(); 
$(window).resize(resizeEntryHeight()); 
});