javascript - CSS 基于 % 宽度的 jQuery 设置高度

Question

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

图片来自 Wordpress 帖子，每张图片都有自己的容器 div，带有 overflow:hidden。容器 div 在 css 中设置为宽度 33.33%。我在 ready() 上使用 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