将 tall 图像的大小调整为 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

Daebak Do 用一些模组引导我找到了正确的答案。我需要设置容器 imageThumb 的最大高度，以便宽度与其他图片保持一致，而不会扭曲高大的图片。如果它最终切断了您的图片太多，您可以尝试注释代码。

var maxHeight = 0;

$('.imageThumb').each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { 
    maxHeight = thisH;
    $('.imageThumb').css('maxHeight', maxHeight);
    //may need to change to the following if pics are getting cut off too much
    // $('.imageThumb img').css('maxHeight', maxHeight);
    // // $('.imageThumb img').css('width', 'auto');

     }
});

上面的代码并不适用于我需要做的所有事情，请参阅下面的代码。欢迎反馈！

var imageThumb = document.getElementsByClassName('imageThumb');
var arr=[];
var tallArr=[];
//add all items to an array
$(".imageThumb").each(function(){ arr.push($(this));});
//filter out all items that are taller than they are wide
arr.filter(function(obj){
  if(obj.context.clientHeight > obj.context.clientWidth) {
    tallArr.push(obj);
  } 
});


//loop through the items that are tall and add a new class to them
for (i = 0; i <= tallArr.length; i++) {
  $(tallArr[i]).addClass('bigHeight'); 
}
//gets first item that has a normal height and grabs it's height value
var normalHeight = arr[0].context.clientHeight;
//change css of bigHeight

//sets bigHeight equal to normalHeight
$('.bigHeight').css('max-height', normalHeight);

Answer 2

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

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

var maxHeight = 0;

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

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

干杯！！