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 回答