jquery - 将高图像调整为 flexbox 网格中其他图像的大小

Question

所以我在 Wordpress 类别页面上有一个 flexbox 网格，显示我所有的帖子以及标题和摘录。除了少数高得多的图像外，大多数图像的比例相同。我想响应地将高大图像的最大高度设置为常规图像的高度。网格中的每个元素都有一个带有 imageThumb 类的图像容器。

(function($) {
 $('.imageThumb img').each(function() {
    var maxHeight;
    var width = $(this).clientWidth;    // Current image width
    var height = $(this).clientHeight;  // Current image height

    // Check if the current width is larger than the max
    if(width > height){
        maxHeight = $(this).clientHeight;
        console.log(maxHeight)
    }

    // Check if current height is larger than max
    if(height > width){
        $(this).css("height", maxHeight);   // Set new height
    }
});

})(jQuery);

我知道我用 (width > height) 位返回了太多的高度。我无法突出显示特定图像并获取它们的高度，因为此博客上的内容总是在变化和移动。

这是与此相关的我的 CSS。

.imageThumb {
  overflow: hidden;
}

.imageThumb img {
  width: 100%;
}

我不想为图像设置宽度和高度(我原来的解决方案)，因为网站所有者希望图片随着窗口尺寸变大而不断放大)。我还尝试将图像设置为绝对定位并将其放入容器中，但这似乎不适用于这种情况。不确定针对此问题的最佳行动方案是什么。

提前致谢!

Answer 1

嗨，我不知道我是否理解得很好，如果没有，请让我看看你的链接。

顺便说一句，我认为这段代码应该可以完成这项工作

var maxHeight = 0;

$('.imageThumb img').each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$('.imageThumb img').height(maxHeight);

干杯!