<！DOCTYPE html>阻止我调整我的< img> [英] <!DOCTYPE html> prevents me from resizing my <img>
问题描述
最近我爱上了HTML5（特别是游戏），我意识到我应该先加强我的JavaScript，因此，我读了 Head First JavaScript（O'Reilly）来破解。
我打算显示 img 标记，其大小根据不同的导航器大小而变化，但是当我添加！DOCTYPE html 时， img 只是无法调整大小。我的简化代码是：
Recently I fall in love with HTML5(especially games), and I realize I should strengthen my JavaScript first, hence, I read Head First JavaScript(O'Reilly) to take a crack. I intended to display an img tag whose size is changing according to the different navigator size, but when I add !DOCTYPE html, img just cannot be resized.here is my simplified code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pet</title>
<link rel="stylesheet" href="style/rock.css">
<script type="text/javascript">
function resizeRock(){
document.getElementById("rock").style.height = ( document.body.clientHeight - 100 ) * 0.9;
}
</script>
</head>
<body onload="resizeRock();">
<div id="_rock">
<img src="image/rock.png" alt="Rock" id="rock"/>
</div>
</body>
</html>
如果我删除！DOCTYPE html ，一切顺利，但我'我想知道原因，更重要的是，我想知道如何在HTML5中调整 img 标签的大小。
谢谢！
If I remove !DOCTYPE html, everything goes well, but I'd like to know the reason, what's more, I'd like to know how to resize img tag in HTML5. Thanks!
推荐答案
当您添加<！DOCTYPE html> ，您将文档置于标准模式。
When you add <!DOCTYPE html>, you put the document into standards mode.
为了实现这一目标，您需要进行一些更改。首先，在标准模式下，页面只有它需要的高度。所以 document.body.clientHeight 只是你图像的高度和一点边距。要使页面的高度与视口的高度匹配，默认情况下在quirks模式下添加此CSS：
There's a couple of changes you need to make to get this working. First, in standards mode, the page is only as high as it needs to be. So document.body.clientHeight is just the height of your image and a little bit of margin. To make the height of the page match that of the viewport, as happens by default in quirks mode add this CSS:
html, body { height:100% }
其次，在标准模式下，您需要声明尺寸'设置style.width和style.height时重新使用。这就像在尺寸设定行的末尾添加 +px一样简单，使其成为
Second, in standards mode, you need to state the dimensions you're using when setting style.width and style.height. This is as easy as adding + "px" to the end of the size setting line, making it
document.getElementById("rock").style.height =
( document.body.clientHeight - 100 ) * 0.9 + "px";
这篇关于<！DOCTYPE html>阻止我调整我的< img>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
