jQuery match div height with dynamic image height

Question

I have a image which has a width set to 100% and a min-width of 1024px. I want to keep my 'shadow' div over the image, and also match it's height as the window size changes, which causes the image size to proportionately change to the window width. My current code appears to do nothing...

Template is here http://jordan.rave5.com/tmp/ you'll notice the backgroudn-overlay and background-gradient divs don't expand 100% of the document. That's another problem. Lol. I'm trying to get them to be the BG 100% width and height.

jQuery:

            $('.header-img').css('height', function(imgheight) {
                $('.image-grad').css({'height': + imgheight});
            });

CSS:

            .image-grad {
                position: absolute;
                z-index: 600;
                transition: width 2s;
                -webkit-transition: width 2s;
                width: 100%;
                min-height: 174px;
                max-height: 608px;
                background-image: url(images/header-img.png);
                background-repeat: repeat-x;
                background-position: bottom;
                top: 0;
                left: 0;
            }

            .header-img {
                position: relative;
                z-index: 500;
                width: 100%;
                min-width: 1024px;
                opacity: 0.0;
            }

HTML:

                    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
                    <div class="image-grad"></div>

How can I accomplish this?

Answer 1

you need to set the height of the div using .height

you can do something like the following:

http://jsfiddle.net/Q4DRp/

var imageGrad = $('.image-grad'),
    image = $('.header-img');

function resizeDiv () {
    imageGrad.height(image.height());
    imageGrad.width(image.width());
}

resizeDiv();

$(window).resize(function() { resizeDiv(); });

Answer 2

This will help you resize your shadow image:

Solution (Not tested)

$('.image-grad').css('height', $('.header-img').attr('height'));

To get the height of your image, use .attr('height'). Then to set the height of the div, use .css('height','999').