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

Question

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

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

当浏览器调整图像大小时，不应该在文本下方，图像应缩小尺寸以保持相同的位置和距离

Answer 1

我就是这样做的。

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 2

按比例分配它并不正确，因为您要设置具有百分比高度的特定宽度。因此，请尝试按相应的百分比设置宽度和高度。

如果您使用100％的高度，那么它总是会在您的文本下面，所以这可以解释为因为它将转到100％的浏览器。

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

Answer 3

您可以使用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 4

@jitendra;是的，您可以使用background-size属性，而不是cover代替100%这样的值

CSS：

#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 5

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