jQuery div画像の高さと一致するdivの高さ

Question

私は、幅が100％に設定され、幅が1024pxの画像を持っています。私はイメージ上に私の影のdivを保持し、ウィンドウサイズに応じて画像サイズを比例的に変更させるウィンドウサイズの変更に応じて、その高さに一致させたい。現在のコードは何もしないようです...

テンプレートはこちらhttp://jordan.rave5.com/tmp/ backgroudn-overlayとbackground-gradient divsはドキュメントの100％を展開しません。それは別の問題です。笑。私はそれらをBG 100％の幅と高さにしようとしています。

の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> 

？

Answer 1

あなたは、次のような何かを行うことができ.height

を使用してdiv要素の高さを設定する必要があります。

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

これは、あなたの影画像のサイズを変更するのに役立ちます：

ソリューション（未テスト）

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

（ '高さ'）.ATTR使用し、あなたのイメージの高さを取得します。 divの高さを設定するには、.css（ 'height'、 '999'）を使用します。