Question

有问题的页面本质上是一个图像网格，无论窗口大小如何，总是三个。

图像来自Wordpress帖子，每个图片都有自己的容器div，溢出：隐藏。容器div的设置为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());
});

CSS使用jQuery基于％width设置高度

2 个答案: