html/js 实现背景图片自适应窗口分辨率大小

最新推荐文章于 2024-03-06 17:24:53 发布

Adamaomaoo

最新推荐文章于 2024-03-06 17:24:53 发布

阅读量1w

点赞数 1

分类专栏： HTML js

本文链接：https://blog.csdn.net/u011641865/article/details/32767587

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>实现背景图片自适应窗口大小</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#bg
{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
<div id="bg"><img src="./tupian.jpg" width="2880" height="1800"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
window.onresize = window.onload = function()
{
var w,h
if(!!(window.attachEvent && !window.opera))
{
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}
else
{
h = window.innerHeight;
w = window.innerWidth;
}
document.getElementById ('msg').value ='窗口大小：' + 'width:' + w + '; height:'+h;
var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
bgImg.width = (w - 5);
bgImg.height= (h-5) ;
}
</script>
</body>
</html>

Adamaomaoo

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html/js 实现背景图片自适应窗口分辨率大小

窗口变 *{ margin:0;padding:0; }#bg{ position:absolute; top:0px; left:0px; z-index:-999;} window.onresize = window.onload = function() { var w,h
复制链接

扫一扫