如何使背景的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; 
}