自适应背景图，不变形，不留空白

转载于 2016-10-10 16:59:00 发布 · 129 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luckyXcc/p/5946492.html

本文介绍了一种使用JavaScript实现的自适应网页背景图片的方法。该方法可根据浏览器窗口大小调整背景图片的比例，确保图片完整显示且不失真。适用于各种分辨率的屏幕。

var backgroundImgDiv = document.getElementById("backgroundImgDiv");
var img = backgroundImgDiv.getElementsByTagName("img")[0];

(setImgSize=function(){
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
document.body.style.height = windowHeight + "px";
var cale = windowWidth/windowHeight;
if (cale >= 1920/1080) {
backgroundImgDiv.style.width = windowWidth+'px';
img.style.width = windowWidth+'px';

backgroundImgDiv.style.height = "auto";
img.style.height= "auto";
} else{
backgroundImgDiv.style.width = "auto";
img.style.width = "auto";

backgroundImgDiv.style.height = windowHeight+'px';
img.style.height= windowHeight+'px';
}
})();
window.onresize=setImgSize;