2013-04-25 23 views
6

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

+0

あなたは、あなたの質問のうち、フィドルを作成することができますか?それはより簡単になります – ripu1581

+0

yupはフィドルを作成し、私はより簡単になります –

+0

それは正しく動作しない(箱のためのウィンドウのサイズ変更はありません)ので、フィドルを作成するのは難しい私はちょうどホストにテンプレートをアップロードすることができます – WASasquatch

答えて

3

あなたは、次のような何かを行うことができ.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(); }); 
+0

初期荷重で高さを324に設定する方法はありますか?最初に読み込んだときの画像の高さは実際の画像の高さであり、伸びたバージョンではないようです。 – WASasquatch

+1

@WASasquatch 'document.ready'ではなく' window.onload'で 'resizeDiv'関数を実行します。そうでなければ' imageGrad.height(324) 'を使って高さを設定できます。 – Pete

+0

ありがとう、大変感謝しています。私の固定された背景がスクロール可能であることが分かっていれば、大きな助けにもなります。 – WASasquatch

1

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

ソリューション(未テスト)

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

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

+0

outerHeight )高さを取得する(余白を追加しますが余白は追加しません)、新しい要素を.height()で設定してください。 –