在浏览器窗口调整大小时，背景图像的宽度和高度都会调整 [英] Background images resize in both width and height upon browser window resize

问题描述

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

How to resize a css background image in proportion when resizing the browser window?

#main {width：950px;高度：100％;背景：url（image.jpg）无重复的中心底部}

当浏览器调整图片大小时，请不要在文本下方显示该图片，而应缩小图片大小以保持相同的位置和距离

When browser resize images should no to go under the text, images should shrink the size to keep the same position and distance

推荐答案

这就是我要这样做的方式。

This is how i would do it.

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

这篇关于在浏览器窗口调整大小时，背景图像的宽度和高度都会调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！