Question

假设我想在我的页面上有几个div，后台有图像（例如：http://www.ubudhanginggardens.com/）。我知道如何设置我的div的大小，但问题是如果我使Web浏览器更小，背景图像保持不变...我希望背景图像使用Web浏览器向上/向下扩展。

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}
#container1 {
    float: left;
    height: 100%;
    width: 50%;
    background-image: url(../img/1.png);
}
#container2 {
    float: left;
    height: 100%;
    width: 50%;
    background-image: url(../img/2.png);
}

Answer 1

这可以使用纯CSS完成，甚至不需要媒体查询。

要使图片更加灵活，只需添加max-width:100%和height:auto即可。图像max-width:100%和height:auto适用于IE7，但不适用于IE8（是的，另一个奇怪的IE错误）。要解决此问题，您需要为IE8添加width:auto\9。

Source

CSS：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

如果您想强制执行图像的固定最大宽度，只需将其放在容器中，例如：

<div style="max-width:500px;">
    <img src="..." />
</div>

jsFiddle example here。不需要JavaScript。适用于最新版本的Chrome，Firefox和IE（我已经测试过）。

Answer 2

如果您希望使用浏览器缩放图像，请将宽度设置为百分比，而不是将其定义为像素数。

因此，如果您希望图像始终覆盖div的一半：

<div class="my_div">
    <img src="http://example.com"></img>
</div>
<style>
    .my_div .image {
        width:50%;
    }
</style>

当您更改浏览器窗口大小时，图像的大小将会改变。您可能需要查看响应式CSS框架，例如Twitter's Bootstrap，它可以帮助您实现此行为。

调整div和背景图像的大小以适合CSS页面

2 个答案: