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

时间:2022-11-17 19:03:36
我用 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


把图片放到<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的高度也随页面大小自动调整吗?


可以,方法相同。