Element height not updating after jquery resize

Question

On resize it doesn't update the height. Once the load has set it's height, it will then not update despite me updating the variable.

If I take out the lines where it sets the height, then my variable updates fine, but once the height is set it just doesn't do anything.

Where have I gone wrong?

var hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);

$(document).ready(function() {
    $(window).load(function() {

        $('.hero-image').css('height', hero_height );

    });

    $(window).resize(function() {

        if (hero_height !== $('.hero-image').outerHeight()) {
            $('.hero-image').css('height', hero_height );
        };

        hero_height = $('.hero-image').outerHeight();
        console.log('heroHeight: ' + hero_height);

    });
});

Here is a JS fiddle
https://jsfiddle.net/5c1za6xa/

Answer 1

Include var hero_height = $('.hero-image').outerHeight(); in the window resize function.

$(window).resize(function() {
    var hero_height = $('.hero-image').outerHeight();
    if (hero_height !== $('.hero-image').outerHeight()) {
        $('.hero-image').css('height', hero_height );
    };

    hero_height = $('.hero-image').outerHeight();
    console.log('heroHeight: ' + hero_height);
});