Question

因此，在一个简单的页面中，有一个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());
});

为什么无法在不更改文档高度的情况下将图像设置为文档高度？

如何在不更改文档高度的情况下将图像设置为文档高度？

Answer 1

我已修复此问题，方法是将align="absmiddle"添加到图片

Demo here

Answer 2

它与HTML DTD有关。当我将其更改为HTML 4.01 Transitional时，所有警报都给出了相同的值。正如您所说，HTML 5和HTML 4.01 Strict都会更改文档高度。

'希望这有助于追查原因。

Answer 3

使用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());
});

Answer 4

我建议您创建一个类似这样的CSS来删除正文中的所有额外内容

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

身体标签有其自身的特性。

为什么将此图像的高度更改为等于文档的高度失败？

4 个答案: