1

Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.

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);
}
4

2 回答 2

2

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

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

资源

CSS：

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

如果你想强制图像的固定最大宽度，只需将它放在一个容器中，例如：

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

jsFiddle 示例在这里。不需要javascript。适用于最新版本的 Chrome、Firefox 和 IE（这是我测试过的全部）。

于 2013-05-02T15:31:18.637 回答
0

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

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

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

当您更改浏览器窗口大小时，图像的大小也会发生变化。您可能想看看响应式 CSS 框架，例如Twitter 的 Bootstrap，它可以帮助您实现这种行为。

于 2013-05-02T15:14:46.980 回答