在调整浏览器窗口大小时，背景图像的宽度和高度都会调整大小

Question

如何在调整浏览器窗口大小时按比例调整css背景图像的大小？

#main {width:950px; height:100%; background:url(image.jpg) no-repeat center bottom}

当浏览器将图像尺寸调整不应以文字去下，图像应该缩小规模，保持同样的位置和距离

Answer 1

您可以使用CSS background-size。看看这里：w3c background-size

您可能是在contain或cover之后。

或者，下面是一个带有img标签的示例：http://jsfiddle.net/jwg2s/尝试调整您的浏览器的大小。

HTML

<div> 
    Heading text Heading text<br/> 
    Heading text Heading text<br/> 
    <img src="http://secondnaturearomatics.com/images/pear1.jpg" border="1" alt=""/> 
</div> 

CSS

div { 
    text-align: center; 
    background: silver; 
    width: 90%; 
    font-size: 25px; 
} 
img { 
    width: 50%; 
} 

Answer 2

@jitendra;是的，你可以使用background-size属性这一点，但不是这样的

CSS在100%cover给定值：

#image{ 
    -moz-background-size: 100% 50%; 
    background:url("image.jpg") no-repeat center bottom; 
} 

可能是对你

阅读这些文章做更多的工作：http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm，http://robertnyman.com/css3/background-size/background-size.html

Answer 3

按比例它不会是正确的，因为您正在设置具有百分比高度的特定宽度。因此，请尝试按照百分比设置宽度和高度。

如果你使用身高100％，那么它总是会在你的文本下面，所以这可以解释为100％的浏览器。

您可能需要尝试将宽度和高度设置为80％等实验值！

Answer 4

这就是我该怎么做的。

http://jsfiddle.net/DpneL/1/

HTML：

<div id="imgCont"> 
    <img src="http://lorempixum.com/400/200/" alt="" /> 
</div> 

CSS：

#imgCont { 
    margin: 0px auto; 
    min-width: 300px; 
    max-width: 900px;  
    width: expression(document.body.clientWidth < 302? "300px" : document.body.clientWidth > 902? "900px" : "auto"); /* ie6 */ 
} 

img { 
    width: 100%; 
} 

Answer 5

我建议使用此jQuery插件http://johnpatrickgiven.com/jquery/background-resize/