如何让背景图片大小自动调整？欢迎高手指教！

我用 AlphaImageLoader 在IE里实现了，不过所有链接失效，如果设置漂浮，界面格式又失控，并且火狐也支持这个。

.bg{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/LoginBack.gif', sizingMethod='scale')}

除此之外，谁还有好的办法让背景图片大小随窗口的改变自动改变呢？（郁闷中...）

22 个解决方案

#1

引用楼主 lxlnet 的帖子:

并且火狐也不支持这个。

#2

学习，帮顶

#3

不懂,帮顶一个

#4



document.onresize = function() {

      document.getElementById(imgId).width = document.body.clientWidth;

      document.getElementById(imgId).height = document.body.clientHeight;

}

没测试

#5

把图片放到<img src=""></img>里
把img再放到需要放置背景图片的div标签里
控制img标签的height和width使其和div标签的高度宽度一致

图片的大小会随img的height,width值的调整而自动缩放

#6



<div class="logo">

    <div class="logo_bg_div">

        <img src="images/logo_bg.jpg"></img>

    </div>

    <div class="logo_text">

        this is logo text.

    </div>

<div>



.logo

{

    position: reletive;

}


.logo_text

{

    position: absulote;

}

当logo区域大小发生变化的时候，用js获得logo区域新的宽和高，把其值传给img的宽和高即可

#7

6 楼，按你的方法，图片只能摆在网页顶部吧，我的目的是把图片变成背景.

#8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">

#bg {

	position: absolute;

	z-index: -100;

	left: 0px;

	top: 0px;

	right: 0px;

	bottom: 0px;

	margin: 0px;

	padding: 0px;

}

#bgimg {

	width: 100%;

	height: 100%;

	margin: 0px;

	border-style: none;

}

</style>

<script type="text/javascript">

//<![CDATA[

window.onload = function() {

	if (!window.event) return;

	var bgimg = document.getElementById("bgimg");

	var bg = document.getElementById("bg")

	bg.onresize = function() {

		bgimg.style.width = this.offsetWidth + "px";

		bgimg.style.height = this.offsetHeight + "px";

	};

	bg.onresize();

};

//]]>

</script>

</head>

<body>

<div>

<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>

<div id="content"><h1>这里放置网页正文内容！</h1></div>

</div>

</body>

</html>

#9

上面代码在 IE7 FF3 下测试都没问题。

#10

根據頁面的情況，顯示背景圖片的大小？

#11

http://interface.eyecon.ro/demos/fisheye.html

有源代码可以下载，大概就是动态的计算长度和宽度，效果还不错！部分引用代码如下：



if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')

  var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;

else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')

  var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();

else 

  var posx = pointer.x - el.fisheyeCfg.pos.x;

var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);


//...

#12

引用 9 楼 sagezk 的回复:

上面代码在 IE7 FF3 下测试都没问题。

我把你的代码考到.html里，测试图片大小不变，怎么回事啊？

引用 10 楼 yanjinye 的回复:

根據頁面的情況，顯示背景圖片的大小？

就是把鼠标放到浏览器右下角，手动拖大拖小，同时背景图片随窗口大小自动调整。

#13

你用的是 IE6 吧，IE6 下我没测试过。

#14

引用 8 楼 sagezk 的回复:



<script type="text/javascript">

//<![CDATA[

window.onload = function() {

    if (!window.event) return;

    var bgimg = document.getElementById("bgimg");

    var bg = document.getElementById("bg")

    bg.onresize = function() {

        bgimg.style.width = this.offsetWidth + "px";

        bgimg.style.height = this.offsetHeight + "px";

    };

    bg.onresize();

};

//]]>

</script>

这段代码是不是只在读入的时候调用一次，在onresize的时候没有调用，所以才会出现他说的大小没有变化的问题啊？
顺便叹一句，你居然已经两星了。。。。

#15

引用 14 楼 talent_marquis 的回复:

[Quote=引用 8 楼 sagezk 的回复:]
JScript code<script type="text/javascript">//<![CDATA[window.onload=function() {if(!window.event)return;varbgimg=document.getElementById("bgimg");varbg=document.getElementById("bg")
    bg.onresize=function() {
        bgimg.style.width=this.offsetWidth+"px";
        bgimg.style.height=this.offsetHeight+"px";
    };
    bg.onresize();
};//]]></script>

这段代码是不是只在读入的时候调用一次，在onresize的时候没有调用，所以才会出现他说的大小没有变化的问题啊？
顺便叹一句，你居然已经两星了。。。。
[/Quote]

bg.onresize = function() { ... 这句已经把 resize 事件处理代码加到 div 上了。

#16

刚试过，IE6 下确实不好使，我再改改。

#17

打开页面的时候，页面顶部有提示：“为了保护您的安全，Internet Explorer 已经限制此文件显示可能访问您的计算机的活动内容。单击此处查看选项...”
单击，如果选择“允许阻止的内容...” 效果就没有了，如果直接关闭，效果还保存，不过放到服务器上以后，浏览器这边默认应该是：“允许阻止的内容...” 所以没效果。

#18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">

html, body {

	height: 100%;

}

#bg {

	position: absolute;

	z-index: -100;

	left: 0px;

	top: 0px;

	right: 0px;

	bottom: 0px;

	margin: 0px;

	padding: 0px;

}

#bgimg {

	width: 100%;

	height: 100%;

	margin: 0px;

	border-style: none;

}

</style>

<script type="text/javascript">

//<![CDATA[

window.onload = function() {

	if (!window.event) return;

	var bgimg = document.getElementById("bgimg");

	window.onresize = function() {

		bgimg.style.width = document.body.clientWidth + "px";

		bgimg.style.height = document.body.clientHeight + "px";

	};

	window.onresize();

};

//]]>

</script>

</head>

<body>

<div>

<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>

<div><h1>这里放置网页正文内容！</h1></div>

</div>

</body>

</html>

#19

这回 IE6 IE7 FF3 下测试都没问题了。

#20

呵呵 sagezk 厉害，
顺便在问下，可以让 <div><h1>这里放置网页正文内容！</h1></div>这个div的高度也随页面大小自动调整吗？

#21

解决了，极度感谢 sagezk ！

#22

引用 20 楼 lxlnet 的回复:

呵呵 sagezk 厉害，
顺便在问下，可以让 <div> <h1>这里放置网页正文内容！ </h1> </div>这个div的高度也随页面大小自动调整吗？

可以，方法相同。

#1

引用楼主 lxlnet 的帖子:

并且火狐也不支持这个。

#2

学习，帮顶

#3

不懂,帮顶一个

#4



document.onresize = function() {

      document.getElementById(imgId).width = document.body.clientWidth;

      document.getElementById(imgId).height = document.body.clientHeight;

}

没测试

#5

#6



<div class="logo">

    <div class="logo_bg_div">

        <img src="images/logo_bg.jpg"></img>

    </div>

    <div class="logo_text">

        this is logo text.

    </div>

<div>



.logo

{

    position: reletive;

}


.logo_text

{

    position: absulote;

}

当logo区域大小发生变化的时候，用js获得logo区域新的宽和高，把其值传给img的宽和高即可

#7

6 楼，按你的方法，图片只能摆在网页顶部吧，我的目的是把图片变成背景.

#8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">

#bg {

	position: absolute;

	z-index: -100;

	left: 0px;

	top: 0px;

	right: 0px;

	bottom: 0px;

	margin: 0px;

	padding: 0px;

}

#bgimg {

	width: 100%;

	height: 100%;

	margin: 0px;

	border-style: none;

}

</style>

<script type="text/javascript">

//<![CDATA[

window.onload = function() {

	if (!window.event) return;

	var bgimg = document.getElementById("bgimg");

	var bg = document.getElementById("bg")

	bg.onresize = function() {

		bgimg.style.width = this.offsetWidth + "px";

		bgimg.style.height = this.offsetHeight + "px";

	};

	bg.onresize();

};

//]]>

</script>

</head>

<body>

<div>

<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>

<div id="content"><h1>这里放置网页正文内容！</h1></div>

</div>

</body>

</html>

#9

上面代码在 IE7 FF3 下测试都没问题。

#10

根據頁面的情況，顯示背景圖片的大小？

#11

http://interface.eyecon.ro/demos/fisheye.html

有源代码可以下载，大概就是动态的计算长度和宽度，效果还不错！部分引用代码如下：



if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')

  var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;

else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')

  var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();

else 

  var posx = pointer.x - el.fisheyeCfg.pos.x;

var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);


//...

#12

引用 9 楼 sagezk 的回复:

上面代码在 IE7 FF3 下测试都没问题。

我把你的代码考到.html里，测试图片大小不变，怎么回事啊？

引用 10 楼 yanjinye 的回复:

根據頁面的情況，顯示背景圖片的大小？

就是把鼠标放到浏览器右下角，手动拖大拖小，同时背景图片随窗口大小自动调整。

#13

你用的是 IE6 吧，IE6 下我没测试过。

#14

引用 8 楼 sagezk 的回复:



<script type="text/javascript">

//<![CDATA[

window.onload = function() {

    if (!window.event) return;

    var bgimg = document.getElementById("bgimg");

    var bg = document.getElementById("bg")

    bg.onresize = function() {

        bgimg.style.width = this.offsetWidth + "px";

        bgimg.style.height = this.offsetHeight + "px";

    };

    bg.onresize();

};

//]]>

</script>

#15

引用 14 楼 talent_marquis 的回复:

[Quote=引用 8 楼 sagezk 的回复:]
JScript code<script type="text/javascript">//<![CDATA[window.onload=function() {if(!window.event)return;varbgimg=document.getElementById("bgimg");varbg=document.getElementById("bg")
    bg.onresize=function() {
        bgimg.style.width=this.offsetWidth+"px";
        bgimg.style.height=this.offsetHeight+"px";
    };
    bg.onresize();
};//]]></script>

#16

刚试过，IE6 下确实不好使，我再改改。

#17

#18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<style type="text/css">

html, body {

	height: 100%;

}

#bg {

	position: absolute;

	z-index: -100;

	left: 0px;

	top: 0px;

	right: 0px;

	bottom: 0px;

	margin: 0px;

	padding: 0px;

}

#bgimg {

	width: 100%;

	height: 100%;

	margin: 0px;

	border-style: none;

}

</style>

<script type="text/javascript">

//<![CDATA[

window.onload = function() {

	if (!window.event) return;

	var bgimg = document.getElementById("bgimg");

	window.onresize = function() {

		bgimg.style.width = document.body.clientWidth + "px";

		bgimg.style.height = document.body.clientHeight + "px";

	};

	window.onresize();

};

//]]>

</script>

</head>

<body>

<div>

<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>

<div><h1>这里放置网页正文内容！</h1></div>

</div>

</body>

</html>

#19

这回 IE6 IE7 FF3 下测试都没问题了。

#20

呵呵 sagezk 厉害，
顺便在问下，可以让 <div><h1>这里放置网页正文内容！</h1></div>这个div的高度也随页面大小自动调整吗？

#21

解决了，极度感谢 sagezk ！

#22

引用 20 楼 lxlnet 的回复:

呵呵 sagezk 厉害，
顺便在问下，可以让 <div> <h1>这里放置网页正文内容！ </h1> </div>这个div的高度也随页面大小自动调整吗？

可以，方法相同。

如何让背景图片大小自动调整？欢迎高手指教！

22 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

相关文章