87,921
社区成员
发帖
与我相关
我的任务
分享背景图片自适应不变形的问题
这是body里的
<div id="bg"> <img id="background" src="image/bb0.jpg" /> </div>
<script type="text/javascript">
var ww=document.body.clientWidth;
var hh=document.body.clientHeight;
var divbg=document.getElementById("bg");
divbg.style.width=ww;
divbg.style.height=hh;
var divs=document.getElementById("background");
if(ww/1003*600>hh)
{divs.style.cssText="width:100%; height:auto; overflow:hidden";}
else
{divs.style.cssText="height:100%; width:auto; overflow:hidden";}
</script>
这是css文件里的
#background{position:absolute; z-index:1; border:none}
我想做一个背景图片，它的分辨率是1003×600，让它全屏但又不变形，不产生滚动条，按照我上面写的，当浏览器宽度太窄时，图片并没有全屏，请问是怎么回事呢？谢谢啦
<div id="bg"> <img id="background" src="image/bb0.jpg" /> </div>
<script type="text/javascript">
var ww=document.body.clientWidth;
var hh=document.body.clientHeight;
var divbg=document.getElementById("bg");
divbg.style.width=ww;
divbg.style.height=hh;
var divs=document.getElementById("background");
if(ww/1003*600>hh)
{divs.style.cssText="width:100%; height:auto; overflow:hidden";}
else
{divs.style.cssText="height:100%; width:auto; overflow:hidden";}
</script>
这是css文件里的
#background{position:absolute; z-index:1; border:none}
我想做一个背景图片，它的分辨率是1003×600，让它全屏但又不变形，不产生滚动条，按照我上面写的，当浏览器宽度太窄时，图片并没有全屏，请问是怎么回事呢？谢谢啦
...全文
请发表友善的回复…
发表回复
天赋淫权 2009-08-24
- 打赏
- 举报
我知道了，放在body里只能运行一次，所以当改变窗口大小时就不管用了，应该把它写成一个函数wh()，然后在<body onresize="wh()" onload="wh()">
这样无论怎样改变窗口大小，图片都会全屏不变形不产生滚动条了。
这样无论怎样改变窗口大小，图片都会全屏不变形不产生滚动条了。
ZhangYaoxing 2009-08-21
- 打赏
- 举报
divbg.style.width=ww + "px";
divbg.style.height=hh + "px";
divbg.style.height=hh + "px";
bxbacn 2009-08-21
- 打赏
- 举报
css目前还做不到背景按比率缩小或放大
用浮动层的方式做吧，不过会很累,浮动背景图层大小方面的计算上面以经有了
用浮动层的方式做吧，不过会很累,浮动背景图层大小方面的计算上面以经有了
tidelgl 2009-08-20
- 打赏
- 举报
<script type="text/javascript">
window.onload=function(){
var ww=document.body.clientWidth;
var hh=document.body.clientHeight;
var divbg=document.getElementById("bg");
divbg.style.width=ww;
divbg.style.height=hh;
var divs=document.getElementById("background");
if(ww/1003*600>hh)
{divs.style.cssText="width:100%; height:auto; overflow:hidden";}
else
{divs.style.cssText="height:100%; width:auto; overflow:hidden";}
}
</script>
happy664618843 2009-08-20
- 打赏
- 举报
img
{
width:expression(document.body.clientWidth>600?"600":auto);
}
{
width:expression(document.body.clientWidth>600?"600":auto);
}
lxtrayn 2009-08-20
- 打赏
- 举报
写到CSS里面
body{
background:url(image/bb0.jpg) no-repeat;
}
body{
background:url(image/bb0.jpg) no-repeat;
}
bing475879749 2009-08-20
- 打赏
- 举报
这个问题有点复杂，今天脑子用过度了，等高人
天赋淫权 2009-08-20
- 打赏
- 举报
还有没有高手能帮我的
天赋淫权 2009-08-15
- 打赏
- 举报
怎么我的错误太低级 大家不屑于回答吗
