gpt4 book ai didi

css div id 容器无法显示百分比高度和宽度的背景图像

转载 作者:太空宇宙 更新时间:2023-11-03 21:21:40 24 4
gpt4 key购买 nike

如果高度和宽度是百分比,为什么 CSS div id gamecontainer 不显示背景图像?它以像素为单位工作,但我希望它能填充不同的屏幕尺寸。

<!DOCTYPE html>
<html>
<head>
<style>

body{
height:100%;
width:100%;
}

#gamecontainer {
width:100%;
height:100%;
background:url("http://www.w3schools.com/css/img_forest.jpg");
border: 1px solid black;
}

.gamelayer {
width:640px;
height:480px;
position:absolute;
display:none;
}
</style>
</head>
<body>
<div id="gamecontainer">
<canvas id="gamecanvas" width="100%" height="100%" class="gamelayer">
</canvas>
</div>
</body>
</html>

最佳答案

尝试使用 vw 或 vh 而不是百分比。它基于相对于屏幕尺寸 1% 的尺寸。例如

代替

body {
height:100%;
width:100%;
}

尝试

body {
height:100vh;
width:100vw;
}

这是一个如何使用它的例子

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

关于css div id 容器无法显示百分比高度和宽度的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36684784/

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