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

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

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

为什么不能像这样将图像设置为文档高度，而不更改文档高度？

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

来源

2012-09-11 Travis J

请注意，jsfiddles不会持续，所以这个问题将变得毫无意义。 –

@LeeTaylor - 发布元，如果你有一个问题与jsfiddle。 –

这是对jsfiddle的一种常见批评。允许问题和答案在将来使用。 –

我有固定的，通过添加align="absmiddle"到图像

Demo here

来源

2012-09-11 00:18:59 haynar

这是行不通的，但有没有更标准化的做法呢？ –

我尝试过'vertical-align：middle'，但它没有为我工作，这就是为什么我建议这个解决方案 – haynar

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

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

来源

2012-09-11 00:24:25 nickdos

-1

我建议你创建一个这样的CSS从身体

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

body标签都有自己的proprety去除所有多余的。

来源

2012-09-11 00:46:59

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

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

来源

2012-09-11 16:55:38

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

回答

相关问题