On my Wordpress category page, I have a flexbox grid showcasing posts with titles and excerpts. Most images have the same proportions, but a few are significantly taller. I'm looking to responsively set the max-height of the tall images to match the height of the regular images. Each grid item includes an image container with the class 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);
I'm aware that the (width > height) comparison may output too many heights. It's not possible to individually target images for their heights due to the dynamic nature of the blog's content.
Here is the CSS related to this issue.
.imageThumb {
overflow: hidden;
}
.imageThumb img {
width: 100%;
}
I've explored various solutions such as setting fixed width and height for the images, but the site owner prefers a scaling effect as the window size increases. I've also attempted absolute positioning within a container, but it didn't yield the desired results. Any suggestions on the best approach to tackle this dilemma would be greatly appreciated.
Thank you for your assistance!