Two elements with same height with jQuery - all the time

Question

I’m taking advantage of a gallery system that I found on the web where, depending on the proximity of the mouse image, it expands proportionally.

Link: Image gallery

Well, I adapted the code to be responsive (and as you can see it’s under construction) and there’s no apparent problem. My problem starts when you change the resolution (either using the browser zoom, or 'spinning' the tablet or mobile). By hovering or clicking (with touchs) on top of any image, in its resolution whose page was loaded, with the description nothing happens, but when a small zoom is given, it is already possible to see all the misalignment of the description with the images. The height of the image is equal to the width. The width is relative.

I imagined a single solution to my problem: using jQuery. I program with a basic level - intermediate in this framework and can do good things. But I have no idea how, by changing the resolution, to change the description size automatically. Until now, I use this code to make both equal:

$(document).ready(function(){
$(".gallery-description").height( $(".gallery-thumbs li a img").height());
})

I hope someone can help me by improving the function or by giving another suggestion! Thank you. :)

Answer 1

You can use the jQuery function .resize():

$(window).resize(function(){
    $(".gallery-description").height( $(".gallery-thumbs li a img").height());
});

Example: FIDDLE

What this function does is trigger an event each time a difference in the resolution of the browser window is detected. The downside is that if you fire some heavy function, it will run every pixel changed in screen size, which can affect performance.