所以我在 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%;
}
我不想为图像设置宽度和高度(我原来的解决方案),因为网站所有者希望图片随着窗口尺寸变大而不断放大)。我还尝试将图像设置为绝对定位并将其放入容器中,但这似乎不适用于这种情况。不确定针对此问题的最佳行动方案是什么。
提前致谢!
最佳答案
嗨,我不知道我是否理解得很好,如果没有,请让我看看你的链接。
顺便说一句,我认为这段代码应该可以完成这项工作
var maxHeight = 0;
$('.imageThumb img').each(function(){
var thisH = $(this).height();
if (thisH > maxHeight) { maxHeight = thisH; }
});
$('.imageThumb img').height(maxHeight);
干杯!
关于jquery - 将高图像调整为 flexbox 网格中其他图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38558430/