0

I tried to solve my problem searching through the various questions already posted, but I have not found one that is made for my

I'm creating my new website using the "responsive" technique and now I'm missing just one little thing:

I enter inside a DIV a background image The DIV should have a width of 100% to fill the entire page, and I have to make sure that the height of the DIV that contains the image will auto resize when resizing the page.

4

2 回答 2

2

如果您希望图像保留包含 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%;
}
于 2013-10-03T20:19:32.837 回答
0

这是你想要的？我刚刚添加了padding: 5px;，background-color: red;所以 op 可以看到该 div 是 100% 宽并且响应以及图像 http://jsfiddle.net/hyKCa/1/

于 2013-10-03T20:11:00.723 回答