求解！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);

疑问点：插件是如何制作这个比例的。思路是什么！

疑问代码:
1. var fRatio = iw/ih; //这里无法理解这个 是算比例吗？？？
2. $("#jq_ez_bg").children("img").css("width",Math.round($(window).height() * (1/fRatio)));
//还有这里的 Math.round($(window).height() * (1/fRatio)) 前面为什么要用窗口的高度，和 后面的为什么要用 1来除，，这又是为了什么？？？

[缺水的孩子]

自己顶！！求高手帮助！

[桃园闲人]

1. var fRatio = iw/ih; //这个是在求宽高比 2. $(window).height() * (1/fRatio)这个表达式我给你变换一下你就明白了，如下： $(window).height() * (1/fRatio) = $(window).height() * (ih/iw)这一步就是按照原始比例做相应的放缩。 公式是这样的：已知新的高度为$(window).height()，设现在新的宽度为X，则有： $(window).height() ： X = iw/ih； x = $(window).height() * ih/iw = $(window).height() * 1/fRatio 就是一个公式变形而已。

[zhjdg]

window 大小 width:1152 height:225 pic 大小 width:1024 iw height:768 ih if ($(window).width() > $(window).height()) { if (iw > ih) { var fRatio = iw/ih; iw = window.width 1152 ih = window.width * (1/fRatio) 864 ==win宽*pic高\pic宽. var newIh = ih = 864 if(newIh < $(window).height()) { 864<225 //window.height = 225 } } if(jqez.center){ 应为ih>window.height 所以把图片移动中间去了。 } }

[zhjdg]

他不是一面的缩小。他还会移动图片的，所以是会显示一块，以图片中间为基准，不全的图片。

[zhjdg]

他先是按比例缩放，然后以图片中间为基准，移动图片

[去圣西罗-为尤文喝彩]

<body style="position:relative;z-index:0;">
<img style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;" data-src="1.jpeg" />
<!-- HTML5 延迟加载，不影响页面整体加载速度  -->
<div id="wrap" style="position:relative;z-index:1;background:transparent;">
<!-- 网页内容 -->
</div>
</body>

[缺水的孩子]

谢谢各位的帮助，结贴给分！！

[allali]

不用img 直接在div设背景就不会拉伸了

[lxhbysn]

等比放大缩小,不仅仅要改变图片的高和宽, 还要改变图片相对于窗口的上和左边的距离. 所以,要在初始化的时候,计算并记住左边距和上边距占整个窗体的百分比. 改变后,要按照百分比重新计算.