求解！JS制作全屏背景图思路！！！
最近在折腾一个项目，在做登录页面。想用全屏图片来当背景。于是刚开始的思路认为只要将图片设置成 width:100%; height:100%; 然后就可以了，发现这样做法，会导致图片拉伸。所以我又去了找了一些全背景登录的网站。比如网易的LOFTER 地址：http://www.lofter.com/，发现其页面不管窗口怎样改变和拉伸，图片的位置：1.不会拉伸难看，2.把图片中间的内容放在窗口中间来显示。
所以我就郁闷了，于是又去Google了一下，找到了一个jQuery 写的全背景图插件，也是自适应窗口来改变图片。实现的原理和Lofter基本是差不多的，所以又看了这插件的源码，里面有一些代码和思路不是能理解。实在是太笨，希望各位能帮小弟来说一下这个思路。
插件地址：http://johnpatrickgiven.com/jquery/background-resize/
JS源码地址：http://johnpatrickgiven.com/jquery/background-resize/js/jquery.ez-bg-resize.js
下面本人在把源码贴上，将一些不理解的地方指出，望各位高手帮小弟整理出思路
/******************************************************
* jQuery plug-in
* Easy Background Image Resizer
* Developed by J.P. Given (http://johnpatrickgiven.com)
* Useage: anyone so long as credit is left alone
******************************************************/
(function($) {
// Global Namespace
var jqez = {};
// Define the plugin
$.fn.ezBgResize = function(options) {
// Set global to obj passed
jqez = options;
// If img option is string convert to array.
// This is in preparation for accepting an slideshow of images.
if (!$.isArray(jqez.img)) {
var tmp_img = jqez.img;
jqez.img = [tmp_img]
}
$("<img/>").attr("src", jqez.img).load(function() {
jqez.width = this.width;
jqez.height = this.height;
// Create a unique div container
$("body").append('<div id="jq_ez_bg"></div>');
// Add the image to it.
$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
// First position object
$("#jq_ez_bg").css("visibility","hidden");
// Overflow set to hidden so scroll bars don't mess up image size.
$("body").css({
"overflow":"hidden"
});
resizeImage();
});
};
$(window).bind("resize", function() {
resizeImage();
});
// Actual resize function
function resizeImage() {
$("#jq_ez_bg").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
// Image relative to its container
$("#jq_ez_bg").children("img").css("position", "relative");
//Resize the img object to the proper ratio of the window
var iw = $("#jq_ez_bg").children("img").width();
var ih = $("#jq_ez_bg").children("img").height();
if ($(window).width() > $(window).height()) {
console.log(iw, ih);
if (iw > ih) {
//一是这里无法理解这个 是算比例吗？？？
var fRatio = iw/ih;
$("#jq_ez_bg").children("img").css("width",$(window).width() + "px");
//还有这里的 Math.round($(window).height() * (1/fRatio)) 前面为什么要用窗口的高度，和 后面的为什么要用 1来除，，这又是为了什么？？？
$("#jq_ez_bg").children("img").css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children("img").css("height",$(window).height());
$("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == "undefined" || jqez.center) {
if ($("#jq_ez_bg").children("img").width() > $(window).width()) {
var this_left = ($("#jq_ez_bg").children("img").width() - $(window).width()) / 2;
$("#jq_ez_bg").children("img").css({
"top" : 0,
"left" : -this_left
});
}
if ($("#jq_ez_bg").children("img").height() > $(window).height()) {
var this_height = ($("#jq_ez_bg").children("img").height() - $(window).height()) / 2;
$("#jq_ez_bg").children("img").css({
"left" : 0,
"top" : -this_height
});
}
}
$("#jq_ez_bg").css({
"visibility" : "visible"
});
// Allow scrolling again
$("body").css({
"overflow":"auto"
});
}
})(jQuery);
if(newIh < $(window).height()) {
864<225 //window.height = 225
}
}
if(jqez.center){
应为ih>window.height
所以把图片移动中间去了。
}
}
[解决办法]
他不是一面的缩小。他还会移动图片的，所以是会显示一块，以图片中间为基准，不全的图片。
[解决办法]
他先是按比例缩放，然后以图片中间为基准，移动图片
[解决办法]
不用img 直接在div设背景就不会拉伸了
[解决办法]
等比放大缩小,不仅仅要改变图片的高和宽,
还要改变图片相对于窗口的上和左边的距离.
所以,要在初始化的时候,计算并记住左边距和上边距占整个窗体的百分比.
改变后,要按照百分比重新计算.
