Javascript CSS使用jQuery基于%width设置高度

所讨论的页面本质上是一个由图像组成的网格，无论窗口大小，始终是三个

这些图片来自Wordpress的帖子，每个帖子都有自己的容器div，带有overflow:hidden。容器div在css中设置为宽度33.33%。我使用jQuery on ready（）和window resize将容器div的高度设置为其宽度

html/php结构如下所示：

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

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

}

问题是，当页面第一次加载时，前四个条目的高度都比下面的条目略高，在第三行脱离网格。只要我在控制台或窗口中再次调用函数resize，高度就会固定并且都相等

在Firefox和Chrome上测试，具有多种起始窗口大小。奇怪的是，前四个条目的高度总是比后面的条目高出5倍

所以我想知道为什么表面上相同宽度的元素在同一个循环中被分配不同的高度，以及我如何制作漂亮的图像网格

希望这是清楚的

---

谢谢。

您可以使用这个jquery插件：

这一定适合您

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

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

---

您从未使用过WindowWidth WindowWidth在不同的函数中用于其他内容。您能提供一些帮助，以便我们能够确切地知道问题所在。我的代码中没有显示它，但我已经在$（document）.ready（）和$（window）.resize（）处调用resizeEntryHeight（）。很有趣，但看起来这是为了使图像适合其容器。我已经做得很好了，是容器本身得到了一个奇怪的初始尺寸。