2012-02-20 5 views
2

私が達成しようとしているのは、100%の画像を置くとそれに応じて高さがうまく調整されるということです。私はその高さをつかみ、それを処理するのが好きです。自動高さが画像に反映されないのはなぜですか?

<div id="view" style="width:950px;"> 
    <img src="1.png" /> 
</div> 

イメージは950x500ピクセルです。しかし、私がビュー$('#view').height()の高さを尋ねると、16ピクセルを返します。誰がそれがなぜこれをするのか知っていますか?イメージのサイズと同じ500ピクセルしか返さないのはなぜですか?

+0

に住んでいるイメージに発射する中止することができる、あなたはあなたのHTMLはここに投稿することができますか? – Ironsun

答えて

2

最初に読み込む画像が必要です。これを試してみてください:

<!DOCTYPE HTML> 
<html> 
    <style> 
    div { width: 950px; } 
    img { width: 100%; } 
    </style> 
<body> 
    <div> 
    <img src="1.png"> 
    </div> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $('img').load(function() { 
     var height = $('div').height(); 
     console.log(height); 
    }); 
    </script> 
</body> 
</html> 
1

私はそれは、画像のサイズを返す有効な値を返します<Div>の大きさを警告するテストを持っています。

しかし、あなたのコード$('view').height()から、私はここで$('#view').height();

への変更を持っていることは私のコードは、それが正しく返されますです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function loaded() { 
      var height = $('#view').height(); 

      alert(height); 
     } 
    </script> 
    </head> 
    <body onload="loaded();"> 
     <div id="view" style="width:950px;"> 
      <img src="Desert.jpg" /> 
     </div> 

    </body> 
</html> 
1

ローカル画像を使用しないでください、あなたは「http://www.veryued.org/wp-content/uploads/2012/02/less-online.png」のように、URLに画像を使用することができます。

慎重jQuery APIをお読みください:loadイベントの

警告画像で使用:

  • をそれは一貫しても確実にクロスブラウザ
  • それは発生しませんが動作しません。イメージsrcが以前と同じsrcに設定されている場合、WebKitで正しく返される
  • DOMツリーが正しくバブルされない
  • すでにブラウザのキャッシュ、それはあなたのHTMLの構造に依存
+0

実際のコードでは、私は全体のパスを持っています。これは標本目的のためだけのものでした。私はそれを知りませんでした。 – Mark

関連する問題