gpt4 book ai didi

javascript - 根据窗口大小缩放 HTML5 网页

转载 作者:行者123 更新时间:2023-11-28 17:47:58 25 4
gpt4 key购买 nike

我正在尝试获取一个带有两个 Canvas 元素的 HTML5 网页,并像网页窗口一样缩小和放大所有内容。这是我当前的代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="treeArea"class="container" style="width:100%">
<canvas id="canvas" class="canvas" width="3920" height="2080" style="z- index:1;"></canvas>
<canvas id="animCanvas" class="canvas" width="3920" height="2080" style="z-index:2;"></canvas>
</div>
<input type="file" id="fileinput" />
<output id="list"></output>
<script type="text/javascript" src="leafNodes.js"></script>
</head>
<body onload=initialise()>
</body>
</html>

正确工作的部分是

<div id="treeArea"class="container" style="width:100%">

但是,我不知道如何以同样的方式缩放高度。我已经通过将 height:100% 放入其中来尝试显而易见的方法,但这不起作用。

**我也是 HTML5 和 CSS 的新手,所以请大方解释。

最佳答案

看起来您的 DOM 元素位于 head 标记而不是 body 标记内。修复该设置后 height: 100% 应该可以工作。

关于javascript - 根据窗口大小缩放 HTML5 网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22870658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com