0

最近我爱上了 HTML5（尤其是游戏），我意识到我应该首先加强我的 JavaScript，因此，我阅读Head First JavaScript(O'Reilly)来尝试一下。我打算显示一个img标签，其大小根据不同的导航器大小而变化，但是当我添加!DOCTYPE html时，无法调整img的大小。这是我的简化代码：

<!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标签的大小。谢谢！

4

2 回答 2

2

添加<!DOCTYPE html>时，会将文档置于标准模式。

您需要进行一些更改才能使其正常工作。首先，在标准模式下，页面只有它需要的高度。document.body.clientHeight图像的高度和一点边距也是如此。为了使页面的高度与视口的高度相匹配，就像在 quirks 模式下默认发生的那样，添加以下 CSS：

html, body { height:100% }

其次，在标准模式下，您需要在设置 style.width 和 style.height 时说明您使用的尺寸。这就像添加+ "px"到尺寸设置行的末尾一样简单，使其

document.getElementById("rock").style.height = 
                                    ( document.body.clientHeight - 100 ) * 0.9 + "px";
于 2012-05-20T11:50:51.967 回答
0

很可能<img>是内联 CSS 元素，您无法为此类元素设置高度。

添加：

 #rock {
       display: block;
 }

在您的样式表中。

摩尔资讯

于 2012-05-20T09:28:30.797 回答