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

最新推荐文章于 2020-12-20 04:52:03 发布

dfieza7990

最新推荐文章于 2020-12-20 04:52:03 发布

阅读量531

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvxue/p/4049934.html

版权

<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();
};

window.οnlοad=function(){
　　resize();

};
function resize(){

 　//获取浏览器的宽高，包括适配ie浏览器 
　　var winWidth = (window.innerWidth)?window.innerWidth:((document.body) && (document.body.clientWidth))?document.body.clientWidth:0; 
　　var winHeight = (window.innerHeight)?window.innerHeight:((document.body) && (document.body.clientHeight))?document.body.clientHeight:0; 　　　　 
　　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>