JQuery matches div height with dynamic image height

Question

I have an image that has a width of 100% and a minimum width of 1024 pixels. I want to keep my “shadow” div above the image, and also correspond to its height when changing the window size, which leads to the fact that the image size is proportionally changed to the window width. My current code seems to be doing nothing ...

The template is here http://jordan.rave5.com/tmp/ , you will notice that the div backgroudn-overlay and background-gradient do not expand 100% of the document. This is another problem. Lol I am trying to make them be 100% wide and BG high.

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 do this?

Answer 1

you need to set div height 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 the shadow image:

Solution (not verified)

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

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