Question

最近我爱上了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 ，一切顺利，但我想知道原因，更重要的是，我想知道如何调整 img HTML5中的标签。谢谢！

Answer 1

当您添加<!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";

Answer 2

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

添加：

 #rock {
       display: block;
 }

在样式表中。

简化信息

https://stackoverflow.com/a/4906624/315168

阻止我调整<img/>的大小

2 个答案: