码迷,mamicode.com
首页 > Web开发 > 详细

js 背景图随浏览器大小而变化,且保持图片不变形

时间:2014-10-25 13:07:46      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   java   sp   div   

<html>
<head>
<style>
body{ 
    overflow:hidden;  
}
#pic{  
  margin:0 auto;width:100%;height:100%;padding:0;max-width:100%;position:relative;   
}
#img{
  position:absolute;left:0px;top:0px;
}
</style>
</head>
<body>
  <div id="pic">
      <img src="" id="img" />
  </div>
 
  <script type="text/javascript">    
   window.onresize=function(){
        resize();
    };
    function resize(){
      //获取浏览器的宽高,包括适配ie浏览器
        if (window.innerWidth)
        var winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
        var winWidth = document.body.clientWidth;
        if (window.innerHeight)
        var winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
        var winHeight = document.body.clientHeight;

     var bg_rate = parseFloat(1920/990);//图片的宽高比
        var br_rate = parseFloat(winWidth/winHeight);//浏览器的宽高比
      //根据宽高比的比较,固定图片的宽高来实现图片铺满屏幕而不变形,多余的部分隐藏
        if(br_rate<bg_rate){
            document.getElementById(img).style.height = winHeight + px 
            document.getElementById(img).style.width = ‘‘; 
        }else{
            document.getElementById(img).style.width = winWidth + px;
            document.getElementById(img).style.height = ‘‘; 
        }
    }
</script>
</body>
</html>

 

js 背景图随浏览器大小而变化,且保持图片不变形

标签:style   blog   color   io   os   ar   java   sp   div   

原文地址:http://www.cnblogs.com/lvxue/p/4049934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!