在調整瀏覽器窗口大小時，背景圖像的寬度和高度都會調整大小

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/