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＆gt; 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);

欢呼声!!

Answer 2

Daebak用一些mod告诉我正确答案。我需要设置容器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);

将高图像的大小调整为flexbox网格中

2 个答案: