JS缩放背景图该怎么做

时间：2022-06-05 05:26:47
我有一张背景图 想让他能适应窗口的浏览器的大小
用clientWidth可以取得窗口的宽度
可是clientHeight却取不了窗口可视内容区的高度 
另外改变窗口大小时触发的是什么事件 可以让他重新计算背景图片大小。
最重要的是计算后的背景图怎么放到BODY里做背景图

20 个解决方案

#1

背景图片是不可以控制宽度高度的吧

#2

只能模拟，把图片相对body绝对定位，再设置它的尺寸。z-index:-1;

#3

那获得整个窗口宽度和高度用哪个属性最合适 兼容性也最高
我现在用的是document.documentElement.scrollHeight和document.documentElement.scrollWidth
窗口事件用的是window.onresize

#4



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

 <script language="javascript">

	function show() {

		document.getElementById("imagesId").style.height = document.body.offsetHeight + "px";

		document.getElementById("imagesId").style.width = document.body.offsetWidth + "px";

	}

	 window.onresize = function() {

		show()

	 }

</script>


 </HEAD>


 <BODY onLoad="show()">

  <img src="images/pic0.jpg" id = "imagesId">

 </BODY>

</HTML>

#5

BOM的东西需要查找，还没有公认的标准

#6

我要用XHTML声明  所以不能用body
又试了一下发现
document.documentElement.scrollHeight和 document.documentElement.clientWidth
最适合  这是我的结论 不知道大家怎么认为

#7

学习了

#8

从ext中节选的代码 
var isStrict=document.compatMode == "CSS1Compat";

var getClientHeight=function(){return isStrict ? document.documentElement.clientHeight :document.body.clientHeight;}

var getScrollHeight=function(){var h=isStrict?document.documentElement.scrollHeight:document.body.scrollHeight;return Math.max(h,getClientHeight());}

var getClientWidth=function(){return isStrict?document.documentElement.clientWidth:document.body.clientWidth;}

var getScrollWidth=function(){var w=isStrict?document.documentElement.scrollWidth:document.body.scrollWidth;return Math.max(w,this.getClientWidth());}

#9

引用 4 楼 xk1126 的回复:
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <script language="javascript">
    function show() {
        docume……


支持。每天回帖即可获得10分可用分！

#10



offsetHeight 

用这个加上你的想法就可以了

#11

楼主用的document.documentElement.scrollHeight在ie6、ie7不兼容吧。
可以用document.documentElement.clientHeight试试。

#12

clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

#13

引用 12 楼 tizll521 的回复:
clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

background-attachement:fixed

#14


对了，支持css3的浏览器可以设置背景图片大小： 


background-size:90%;

#15

引用 12 楼 tizll521 的回复:
clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

这个浏览器也不兼容啊

#16

。。。  那你们说哪个兼容性最高 

#17

引用 15 楼 xiamin8 的回复:
引用 12 楼 tizll521 的回复:

clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度
offsetHeight和scrollHeight不知道用哪个好了

这个浏览器也不兼容啊

说错了，
当页面内容高度 < 浏览器可视区域高的时候 
  在ie里scrollHeight =内容所占的高度，offsetHeight=浏览器可视区域的高度
  在火狐里scrollHeight=浏览器可视区域的高度 offsetHeight=内容所占的高度
当页面内容高度 >= 浏览器可视区域高的时候
在ie里scrollHeight =内容所占的高度，offsetHeight=浏览器可视区域的高度
在火狐里scrollHeight=内容所占的高度 offsetHeight=内容所占的高度

建议用scrollHeight与clientHeight比较哪个大用哪个值。

#18

主要原因是因为document.documentElement 才出现上面的情况，要是用document.body 那么，scrollHeight和offsetHeight 都是内容所占的高度

#19

互联网公司招聘网站高级开发工程师，岗位职责：  
1．参与或带领开发小组进行网站上各类产品的开发；
2．参与网站性能调优。
岗位要求：  
1．3年以上网站开发经验，1年以上WEB2.0网站开发经验；
2．精通.NET/C# 开发，精通CSS，熟悉SQL数据库设计及熟练应用SQL语言；
3．熟悉网站产品开发流程，对网站产品的UI及用户体验有很好的认识；
4．至少熟悉一种javascript主流基础开发包；
5．有很高的网站程序开发热情，有一定的项目管理能力；
6．能熟练阅读英文资料；
7．良好的沟通能力，学习能力及团队合作精神。
有意向的请发送简历至huangxuhua@ellen-hunter.com

#20

引用 18 楼 xiamin8 的回复:
主要原因是因为document.documentElement 才出现上面的情况，要是用document.body 那么，scrollHeight和offsetHeight 都是内容所占的高度


确实如你所说的一样  看来高度的话 判断一下最好  因为要用XHTML声明  所以document.body肯定不能用了 

#21

#1

背景图片是不可以控制宽度高度的吧

#2

只能模拟，把图片相对body绝对定位，再设置它的尺寸。z-index:-1;

#3

那获得整个窗口宽度和高度用哪个属性最合适 兼容性也最高
我现在用的是document.documentElement.scrollHeight和document.documentElement.scrollWidth
窗口事件用的是window.onresize

#4



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

 <script language="javascript">

	function show() {

		document.getElementById("imagesId").style.height = document.body.offsetHeight + "px";

		document.getElementById("imagesId").style.width = document.body.offsetWidth + "px";

	}

	 window.onresize = function() {

		show()

	 }

</script>


 </HEAD>


 <BODY onLoad="show()">

  <img src="images/pic0.jpg" id = "imagesId">

 </BODY>

</HTML>

#5

BOM的东西需要查找，还没有公认的标准

#6

我要用XHTML声明  所以不能用body
又试了一下发现
document.documentElement.scrollHeight和 document.documentElement.clientWidth
最适合  这是我的结论 不知道大家怎么认为

#7

学习了

#8

从ext中节选的代码 
var isStrict=document.compatMode == "CSS1Compat";

var getClientHeight=function(){return isStrict ? document.documentElement.clientHeight :document.body.clientHeight;}

var getScrollHeight=function(){var h=isStrict?document.documentElement.scrollHeight:document.body.scrollHeight;return Math.max(h,getClientHeight());}

var getClientWidth=function(){return isStrict?document.documentElement.clientWidth:document.body.clientWidth;}

var getScrollWidth=function(){var w=isStrict?document.documentElement.scrollWidth:document.body.scrollWidth;return Math.max(w,this.getClientWidth());}

#9

引用 4 楼 xk1126 的回复:
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <script language="javascript">
    function show() {
        docume……


支持。每天回帖即可获得10分可用分！

#10



offsetHeight 

用这个加上你的想法就可以了

#11

楼主用的document.documentElement.scrollHeight在ie6、ie7不兼容吧。
可以用document.documentElement.clientHeight试试。

#12

clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

#13

引用 12 楼 tizll521 的回复:
clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

background-attachement:fixed

#14


对了，支持css3的浏览器可以设置背景图片大小： 


background-size:90%;

#15

引用 12 楼 tizll521 的回复:
clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度 
offsetHeight和scrollHeight不知道用哪个好了

这个浏览器也不兼容啊

#16

。。。  那你们说哪个兼容性最高 

#17

引用 15 楼 xiamin8 的回复:
引用 12 楼 tizll521 的回复:

clientHeight肯定是不行的 如果高度超出屏幕高度 clientHeight是不包含那超出的高度
offsetHeight和scrollHeight不知道用哪个好了

这个浏览器也不兼容啊

说错了，
当页面内容高度 < 浏览器可视区域高的时候 
  在ie里scrollHeight =内容所占的高度，offsetHeight=浏览器可视区域的高度
  在火狐里scrollHeight=浏览器可视区域的高度 offsetHeight=内容所占的高度
当页面内容高度 >= 浏览器可视区域高的时候
在ie里scrollHeight =内容所占的高度，offsetHeight=浏览器可视区域的高度
在火狐里scrollHeight=内容所占的高度 offsetHeight=内容所占的高度

建议用scrollHeight与clientHeight比较哪个大用哪个值。

#18

主要原因是因为document.documentElement 才出现上面的情况，要是用document.body 那么，scrollHeight和offsetHeight 都是内容所占的高度

#19

互联网公司招聘网站高级开发工程师，岗位职责：  
1．参与或带领开发小组进行网站上各类产品的开发；
2．参与网站性能调优。
岗位要求：  
1．3年以上网站开发经验，1年以上WEB2.0网站开发经验；
2．精通.NET/C# 开发，精通CSS，熟悉SQL数据库设计及熟练应用SQL语言；
3．熟悉网站产品开发流程，对网站产品的UI及用户体验有很好的认识；
4．至少熟悉一种javascript主流基础开发包；
5．有很高的网站程序开发热情，有一定的项目管理能力；
6．能熟练阅读英文资料；
7．良好的沟通能力，学习能力及团队合作精神。
有意向的请发送简历至huangxuhua@ellen-hunter.com

#20

引用 18 楼 xiamin8 的回复:
主要原因是因为document.documentElement 才出现上面的情况，要是用document.body 那么，scrollHeight和offsetHeight 都是内容所占的高度


确实如你所说的一样  看来高度的话 判断一下最好  因为要用XHTML声明  所以document.body肯定不能用了 

#21

标签：

相关文章