背景图像在浏览器窗口调整大小时同时调整宽度和高度答案

【问题标题】：Background images resize in both width and height upon browser window resize背景图像在浏览器窗口调整大小时同时调整宽度和高度
【发布时间】：2011-08-26 06:32:37
【问题描述】：

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

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

当浏览器调整图片大小时，图片不应低于文本，图片应缩小尺寸以保持相同的位置和距离

【问题讨论】：

标签： css

【解决方案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%;
}

【讨论】：

【解决方案2】：

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

如果您使用 100% 的高度，那么它也总是会出现在您的文本下方，这样就可以解释这一点，因为它将进入 100% 的浏览器。

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

【讨论】：

【解决方案3】：

@jitendra;是的，您可以为此使用background-size 属性，但不要像cover 那样在100% 中赋予价值

CSS：

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

也许这对你有用

【讨论】：

【解决方案4】：

您可以使用 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%;
}

【讨论】：

但我的图像没有覆盖整个背景。这是一个位于中心底部的小型无重复图像
我可能会建议它可能不是“背景图像”，并且在语义上它可能更好地由 img 标签表示。
也许img 标签会适合，否则您可以将background-size css 添加到div，其宽度和高度以相对于文档/视口的百分比指定。

【解决方案5】：

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

【讨论】：