Question

如何设置div容器的背景，只给它一个相对高度（除了背景本身之外，div中没有内容）。

下面的代码工作正常，但它给我的div一个350px的绝对高度。当我重新缩放浏览器窗口时，div和之后的内容之间会有一个间隙，然后是350px。

#div 
{
background: url("bg.jpg") no-repeat;
background-size: 100% auto;
height: 350px;
width: 100%;
}

Answer 1

如果你想让div具有完整的高度，那么使div，html和body的高度为100%，没有边距可以填满整个屏幕：

html, body, #div {
    height: 100%;
    width: 100%;
    margin: 0px;
}

然后，将背景设置为覆盖而不会溢出：

#div {
    background: url("http://placehold.it/350x150") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    overflow: none;
}

小提琴： Fiddle

将背景水平放置在中央，切断任何左侧或右侧溢出。

这也假设您的背景水平方向比垂直方向更长，这听起来像是您的问题。如果没有，你应该修正背景并将其垂直居中。

Answer 2

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;

您还可以为不同的设备宽度添加以下内容

.responsive-image{
  width: 100%;
  background-size: 100% 100%;
} 


/* Retina display */
@media screen and (min-width: 1024px){
   .responsive-image{
    background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
   .responsive-image{
    background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
    background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
    background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
    background-image: url('../img/mobile-ld.jpg');
    }
}

使用背景大小和相对高度

2 个答案: