根据屏幕分辨率使用CSS和Javascript调整背景大小 [英] Resizing background using CSS and Javascript according to screen resolution
问题描述
当你无法使用CSS调整背景宽度时，我一直很头疼：
body {
background：url（/images/bg.jpg）;
背景宽度：800px;
}
它不会工作，不是吗？当然不是，它甚至没有在CSS中定义。
所以，让我们尝试使用javascript 来解决它：
有两种方法，第一种方法是你准备大量不同的
宽度图像，将它们分为640,800,1024,1280,1600和
无论如何其他尺寸。然后你用javascript来检测屏幕宽度
你完成了。容易但不完全正是我要找的。
第二种方法：创建一个图层（用于背景图像）下面
现有内容并根据屏幕调整图像大小
宽度。
bgimg = document.createElement（" bgimg"）;
bgimg.src =" /images/bg.jpg" ;;
st = {
position：" absolute"，
zIndex： " -10"，
宽度：screen.width，
top：" 0"，
left：" 0"
}
for（s in st）{
img.style [s] = st [s];
}
document.body.appendChild（bgimg）;
Seige在6上说了以下内容/ 19/2006 1:40 PM：当你无法使用CSS调整背景宽度时，我一直很头疼：
不，不能''说我有。
身体{
背景：url（/images/bg.jpg）;
background-width：800px;
}
它不会工作，不是吗？当然不是，它甚至没有在CSS中定义。
所以，让我们尝试用javascript 来解决它：
有两个方法，第一种方法，你准备大量不同的宽度图像，将它们分为640,800,1024,1280,1600和其他任何尺寸。然后你使用javascript来检测屏幕宽度
你就完成了。容易但不完全是我正在寻找的东西。
那个人不能可靠地工作。屏幕宽度无关紧要。浏览器
视口可能会有所帮助。
第二种方法：创建一个图层（用于背景图像）下面的现有内容并调整图像大小根据屏幕宽度。
这是微不足道的，并不需要JS来做。
bgimg = document.createElement（" bgimg"）;
bgimg .src =" /images/bg.jpg" ;;
st = {
position：" absolute"，
zIndex：" -10"，
width：screen .width，
top：" 0"，
left：" 0"
}
for（s in st）{
img.style [s] = st [s];
}
document.body.appendChild（bgimg）;
这并不像它那么高视口或其他任何东西
重要。而且，screen.width是无关紧要的。一个2048像素宽的图像
在我的600像素宽的浏览器窗口中不会很好。
-
兰迪
comp.lang.javascript常见问题 - http://jibbering.com/常见问题&新闻组每周
Javascript最佳实践 - http：//www.JavascriptToolbox .com / bestpractices /
所以Grumpy-o-Randy先生，你有什么建议？
屏幕.clientWidth？screen.clientwidth：screen.width;
身高并不是我特别关心的因为宽度更依赖于设计中的
，除非它一个水平的网站。
Randy Webb写道：Seige在2006年6月19日下午1:40说了以下内容：当你不能使用CSS调整背景宽度时，我一直很头疼：
不，不能说我有。
body {
background：url（/images/bg.jpg）;
background-width：800px;
}
它不会工作，会吗？当然不是，它甚至没有在CSS中定义。
所以，让我们尝试用javascript 来解决它：
有两个方法，第一种方法，你准备大量不同的宽度图像，将它们分为640,800,1024,1280,1600和其他任何尺寸。然后你使用javascript来检测屏幕宽度
你就完成了。容易，但不完全是我正在寻找的。
那个人不能可靠地工作。屏幕宽度无关紧要。浏览器
视口可能会有所帮助。
第二种方法：创建一个图层（用于背景图像）下面的现有内容并调整图像大小根据屏幕的宽度。
这是微不足道的，并不需要JS来做。
bgimg = document .createElement（" bgimg"）;
bgimg.src =" /images/bg.jpg" ;;
st = {
position：" absolute"，
zIndex ：" -10"，
width：screen.width，
top：" 0"，
left：" 0"
}
for（s在st）{
img.style [s] = st [s];
}
document.body.appendChild（bgimg）;
这不会像视口一样高，或者其他什么东西。而且，screen.width是无关紧要的。在我的600像素宽的浏览器窗口中，2048像素宽的图像不会很好。
-
Randy
comp.lang.javascript常见问题 - http://jibbering.com/faq &新闻组每周
Javascript最佳实践 - http://www.JavascriptToolbox.com/bestpractices /
" Seige" < BL ****** @ gmail.com>发布：
< snip>
bgimg = document.createElement（" bgimg"）;
bgimg.src =" / images /bg.jpg" ;;
st = {
position：" absolute"，
zIndex：" -10"，
宽度：screen.width，
top：" 0"，
left：" 0"
}
for（s in st）{
img.style [s] = st [s];
}
document.body.appendChild（bgimg）;
< / snip>
不应该为语句读取...
for（s in st）{
bgimg.style [s] = st [s];
}
???
-
Jim Carlock
回复小组。
Ever had headache when you can''t resize the background width using CSS:
body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}
It won''t work, would it? Of course not, it''s not even defined in CSS.
So, let''s try to work it out using javascript:
There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you''re done. Easy but not exactly what I''m looking for.
Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.
bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.appendChild(bgimg);
解决方案Seige said the following on 6/19/2006 1:40 PM:Ever had headache when you can''t resize the background width using CSS:
Nope, can''t say that I have.
body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}
It won''t work, would it? Of course not, it''s not even defined in CSS.
So, let''s try to work it out using javascript:
There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you''re done. Easy but not exactly what I''m looking for.
That one won''t work reliably. screen width is irrelevant. Browser
viewport might be of help though.
Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.
Thats trivial and doesn''t need JS to do it.
bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.appendChild(bgimg);
That doesn''t make it as tall as the viewport, or anything else for that
matter. And again, screen.width is irrelevant. A 2048 pixel wide image
wouldn''t go real well in my 600 pixel wide browser window.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
So Mr Grumpy-o-Randy, what do you propose?
screen.clientWidth?screen.clientwidth:screen.width ;
height isn''t particularly of my concern because width is more dependent
in a design unless its a horizontal website.
Randy Webb wrote:Seige said the following on 6/19/2006 1:40 PM:Ever had headache when you can''t resize the background width using CSS:
Nope, can''t say that I have.body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}
It won''t work, would it? Of course not, it''s not even defined in CSS.
So, let''s try to work it out using javascript:
There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you''re done. Easy but not exactly what I''m looking for.
That one won''t work reliably. screen width is irrelevant. Browser
viewport might be of help though.Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.
Thats trivial and doesn''t need JS to do it.bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.appendChild(bgimg);
That doesn''t make it as tall as the viewport, or anything else for that
matter. And again, screen.width is irrelevant. A 2048 pixel wide image
wouldn''t go real well in my 600 pixel wide browser window.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
"Seige" <bl******@gmail.com> posted:
<snip>
bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.appendChild(bgimg);
</snip>
Shouldn''t that for statement read as...
for (s in st) {
bgimg.style[s] = st[s];
}
???
--
Jim Carlock
Post replies to the group.
这篇关于根据屏幕分辨率使用CSS和Javascript调整背景大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
