<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.onload=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>
這是一個以一張圖片為背景圖的頁面，當瀏覽器不同大小的時候需要背景圖片也跟着按照正常的比例進行縮放，適配。