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:…

Accepted Answer

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(); });
```

jQuery match div height with dynamic image height

Solution

Problem