2

したがって、単純なページには、divを含む がありimgます。ドキュメントは、おそらく と同じ高さになりimageます。しかし、そうではありません。環境によっては、ドキュメントが少し大きくなります。例を確認するには、このjsfiddleを参照してください。基本的に、画像をドキュメントの高さに設定すると、ドキュメントの高さが変わります。

jsfiddle が利用できなくなった場合のセットアップは次のとおりです。

html

<div><img id="img" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/138/overrides/save-the-ocean-tips_13821_600x450.jpg" /></div>​

js

$(function(){
 alert("Image Height Before Assignment: " + $("#img").height()); 
 var docH = $(document).height();
 alert("Document Height Before Assignment: " + docH);
 $("#img").height(docH);
 alert("Image Height After Assignment: " + $("#img").height()); 
 alert("Document Height After Assignment: " + $(document).height());
});

</p>

</p>

ドキュメントの高さを変更せずに、このように画像をドキュメントの高さに設定できないのはなぜですか?

文書の高さを変更せずに画像を文書の高さに設定するにはどうすればよいですか?

4

4 に答える 4

2

align="absmiddle"画像に追加することで修正しました

デモはこちら

于 2012-09-11T00:18:59.033 に答える
1

HTML DTD と関係があります。に変更するとHTML 4.01 Transitional、すべてのアラートが同じ値になりました。HTML 5あなたが言ったように、HTML 4.01 Strict両方ともドキュメントの高さを変更します。

「これが原因の追跡に役立つことを願っています.

于 2012-09-11T00:24:25.313 に答える
0

使用align="absmiddle"は悪い形式であり、標準化されていません。私は haynar1658 に、align="absmiddle". 私が遭遇したのは css プロパティvertical-align:middle;です。これがjsfiddleの解決策です。

jsfiddle を恐れている、または批判している人のために、コードは次のとおりです。

html

<div><img id="img" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/138/overrides/save-the-ocean-tips_13821_600x450.jpg" /></div>​

CSS

/*
This will ensure the document height doesn't change
*/

#img
{ 
 vertical-align:middle;   
}​

js

//Display Image height, then document height, then change image height and show that the change no longer affects the document height
$(function(){
 //Show Image height before
 alert("Image Height Before Assignment: " + $("#img").height());

 //Get Document Height
 var docH = $(document).height();
 //Show Document Height
 alert("Document Height Before Assignment: " + docH);
 //Assign image height
 $("#img").height(docH);
 //Show image height
 alert("Image Height After Assignment: " + $("#img").height());
 //Show document height
 alert("Document Height After Assignment: " + $(document).height());
});

</p>

于 2012-09-11T16:55:38.950 に答える
-1

このようなCSSを作成して、本文から余分なものをすべて削除することをお勧めします

body{
 margin:0px;
 paddin:0px;
 border:0px;
}

body タグには独自のプロパティがあります。

于 2012-09-11T00:46:59.400 に答える