标签：
在制作一个登录界面时遇到了这样一个问题，背景图片是一张大的图片，登录内容设计师设计的比较大，当我把图切出来之后，发现由于我的浏览器屏幕比较小，背景图片出现了滚动条，登录内容在小的屏幕下显得异常的大，这样我们就需要解决两个问题：1如何让背景图片完整的铺满整个屏幕，并且随着浏览器屏幕的不同自适应 2如何让登录内容始终居中，这样就是登录内容到屏幕顶端的距离的自适应。
解决方法：问题1 将背景图片单独切出来，但用作前景图片，并设置
.beijing {
position:fixed;
width:100%;
top:0;
left:0;
}
然后把登录内容设置为
position:relative;
问题2 通过JS来动态判断浏览器的高度，设置当下的margin-top
$(function () {
var zishiying = function (obj) {
var WinH = $(window).height();
var WinW = $(window).width();
var winQuotient = WinW / WinH;
var szy_dl_totalH = $(".szy_dl_total").height();
$(".szy_dl_total").css({
"margin-top" : (WinH - szy_dl_totalH)/2
});
}
$(window).resize(function() {
zishiying($(".szy_dl_beijing img"));
});
zishiying($(".szy_dl_beijing img"));
})
标签：
原文地址：http://www.cnblogs.com/s-z-y/p/4691895.html
