如何使背景的div响应？

Question

我有一个水平放置在身体中间的容器，这个容器内部包含一个div，这个div有一个背景， 我希望div的背景在缩小或调整窗口大小时能够响应这里的网站ask.fm，我用background-size: cover;，但它没有与我一起工作。

HTML

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

CSS

.container { 
    width: 851px; 
    margin: 0px auto; 
} 

.cover { 
    background-image: url("wall.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 300px; 
} 

/* Media Queries */ 
@media screen and (max-width: 840px) { 
    .cover { 
    width: 100%; 
    } 
    .container { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 600px) { 
    .container { 
    padding: 0; 
    } 
} 

Answer 1

我通常做的这些事情2的组合 - 取决于屏幕尺寸 - 和我抢不同的SRC的图像/背景或内嵌取决于.. 。

<section class="container"> 
<div class="inner-w"> 

    <figure> 
    <img src="https://placehold.it/1600x900" alt=""> 
    </figure> 

</div> 
</section> 



<section class="container section-name"> 
<div class="inner-w"> 

    <!-- ... --> 

</div> 
</section> 

https://jsfiddle.net/sheriffderek/4j2avj7v/

figure { 
    margin: 0; 
} 

figure img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.container { 
    background: gray; 
    border: 1px solid blue; 
} 

.container .inner-w { 
    max-width: 400px; /* just for this example... likely 900+ */ 
    margin: 0 auto; 
    background: red; 
} 

.section-name .inner-w { 
    min-height: 300px; /* it needs to have some shape */ 

    background-image: url('http://placehold.it/1600x900'); 
    background-size: cover; 
    background-position: center center; 
}