Question

我试图通过已经发布的各种问题来解决我的问题，但我还没找到一个为我做的

我正在使用“响应式”技术创建我的新网站，现在我只缺少一件小事：

我在DIV中输入背景图像 DIV应该有100％的宽度来填充整个页面，我必须确保在调整页面大小时，包含图像的DIV的高度会自动调整大小。

Answer 1

如果您希望图像保留包含div的宽度和高度，请使用：

background-size: 100% 100%;

图像会扭曲，但你可能不介意。

如果你想要背景是图像的任何部分足以覆盖视口改变时整个div，使用：

background-size: cover;

如果要确保整个图像在背景中具有适当的宽高比，请使用：

background-size: contain;

在这种情况下，可以平铺图像以覆盖div。

HTML

<div id="thediv"></div>

CSS

html, body {
    height: 100%;
}

#thediv {
    height: 100%;
    background-image: url(http://i.imgur.com/MabCTXH.jpg);
    background-size: 100% 100%;
}

Answer 2

这是你在找什么？我刚刚添加了padding: 5px;和background-color: red;，因此我们可以看到div是100％宽并且响应和图像一样 http://jsfiddle.net/hyKCa/1/

CSS：保持Div元素的纵横比

2 个答案: