c语言输出窗口的缩放,全屏登录窗口随窗口的缩放而缩放

以前切片时做的登录窗口一般都是800*600这样大小的登录窗口，所以在各个浏览器上都可以居中，而且其周围的背景都是单一的颜色，而现在如果有 一张图片很大(比如1440*900)，那么怎么让他在整个屏幕中居中，而且可以随着窗口的缩放而对称缩放的，这个问题困扰了我好久，终于在前两天别我解 决了，所以不忘在此与各位分享，希望让遇到同样情况的网友可以有个解决方案。由于图片太大上传不了

解决方法如下：这里主要用js加上css中的绝对定位来实现的，

前台页面的html代码如下

.divbg

{

height: 900px;

overflow: hidden;

background-image: url('Image/loginbg.jpg');

background-position: center;

background-repeat: no-repeat;

position: relative;

}

html

{

padding: 0px;

margin: 0px;

}

html

{

overflow: visible;

}

body

{

padding: 0px;

margin: 0px;

overflow: hidden;

position: relative;

background-color: White;

}

.login

{

position: absolute;

}

.login ul

{

margin: 0px;

padding: 0px;

list-style: none;

}

.login ul li

{

margin-top: 5px;

}

input.text-input

{

height: 26px;

width: 179px;

background: url(Image/kuang.jpg) no-repeat 0 0;

padding-left: 3px;

text-align: left;

border: none;

line-height: 26px;

*line-height:26px;

_line-height:26px;

overflow: hidden;

over-flow: hidden;

}

• 

  

下面我把js贴出来

$(document).ready(function() {

var screenwidth, screenheight, mytop, getPosLeft, getPosTop

screenwidth = $(window).width();

screenheight = $(window).height();

//获取滚动条距顶部的偏移

mytop = $(document).scrollTop();

//计算弹出层的left

//应该一直是满屏的所以getPosLeft，getPosTop一直为0

getPosLeft = 0;

//计算弹出层的top

getPosTop = 0;

//css定位弹出层

$(".divbg").css({ "left": getPosLeft, "top": getPosTop });

//这里240,393，是相对于我图片上登录部分相对于图片左边和顶部的绝对距离

$(".login").css({ "left": screenwidth/2-240, "top":393});

//当浏览器窗口大小改变时

$(window).resize(function() {

screenwidth = $(window).width();

screenheight = $(window).height();

mytop = $(document).scrollTop();

getPosLeft = 0;

getPosTop = 0;

$(".divbg").css({ "left": getPosLeft, "top": getPosTop});

$(".login").css({ "left": screenwidth/2-240, "top": 393});

});

//当拉动滚动条时，弹出层跟着移动

$(window).scroll(function() {

screenwidth = $(window).width();

screenheight = $(window).height();

mytop = $(document).scrollTop();

getPosLeft = 0;

getPosTop = 0;

$(".divbg").css({ "left": getPosLeft, "top": getPosTop });

$(".login").css({ "left": screenwidth/2-240, "top": 393});

});

});

运行的效果截图如下：