2

我想在我的网站上添加封面图片。我在页面顶部有一个 div 标签。我已将 div 标签的宽度设置为 80%，将高度设置为自动。我想添加一个图像作为该 div 的背景。该图像宽度应根据 div 的宽度进行拉伸。图像高度应根据其新宽度（拉伸宽度）自动更改。

4

5 回答 5

3 
.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

why wont you just use patterns instead of crippling web?

于 2013-10-31T12:30:23.410 回答
1

You can use the CSS3 background-size property.

http://jsfiddle.net/9UNVT/

CSS

.background { border:1px solid red; width:500px; height:500px; background:url('http://placehold.it/100x100') 0 0 no-repeat; }
.cover { background-size:cover; }

HTML

<div class="background">
    no-cover
</div>

<div class="background cover">
    cover
</div>

Note : I have just used background-size, but you'll probably need to include all the vendor prefixed versions if you want to make it more flexible.

于 2013-10-31T12:30:49.627 回答
1

您最好尝试此代码.. 背景图像将根据宽度拉伸。

<div class="container">
</div>


.container {
width:80%;
background:url(image.png) no-repeat center center;
background-size:100% 100%;
}
于 2013-10-31T12:53:00.597 回答
0 
.style1 {
        background: url(images/bg.jpg) center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
-ms-background-size: cover;
        background-size: cover;
}
.style1 {
background-size:100% 100%
}
于 2013-10-31T12:36:56.793 回答
-1

您始终可以将图像设置为背景图像：

.div {

background-image:url('image.jpg');

}
于 2013-10-31T12:28:02.753 回答