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

问题描述：

如何在调整浏览器窗口大小时按比例调整css背景图像的大小？在调整浏览器窗口大小时，背景图像的宽度和高度都会调整大小

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

enter image description here

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

答

您可以使用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'，它的宽度和高度都是相对于文档/视口指定的％。 – Bazzz

答

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

CSS在100%cover给定值：

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

可能是对你

答

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

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

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

答

这就是我该怎么做的。

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%; 
}

答

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

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

相关推荐