CSS 根据 jQuery 的宽度百分比设置高度

Posted 2023-03-06

【中文标题】CSS 根据 jQuery 的宽度百分比设置高度

【英文标题】：CSS Setting height based on % width with jQuery

【发布时间】：2012-12-17 02:19:27

【问题描述】：

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

图片来自 Wordpress 帖子，每个都有自己的容器 div，带有溢出：隐藏。容器 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。

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

希望这很清楚！

谢谢。

【问题讨论】：

你从不使用 windowWidth

windowWidth 用于其他功能。

您能否提供一些小提琴，以便我们确切知道问题所在。

【参考方案1】：

你可以使用这个 jquery 插件：https://github.com/karacas/imgLiquid

【讨论】：

很有趣，但看起来这是为了使图像适合其容器。我已经做得很好了，是容器本身的初始大小变得奇怪。

【参考方案2】：

这一定对你有用

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


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

【讨论】：

这里没有显示在我的代码中，但我已经在 $(document).ready() 和 $(window).resize() 处调用了 resizeEntryHeight()。