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

<!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>

你可能感兴趣的:(html/js 实现背景图片自适应窗口分辨率大小)