如何使背景的div响应?
我有一个水平放置在身体中间的容器,这个容器内部包含一个div,这个div有一个背景, 我希望div的背景在缩小或调整窗口大小时能够响应这里的网站ask.fm,我用background-size: cover;
,但它没有与我一起工作。如何使背景的div响应?
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;
}
}
我通常做的这些事情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;
}
熟悉Chrome的开发工具,然后您可以检查您喜欢的网站并查看他们如何编写自己的CSS。您给出的last.fm示例使用了background-size:cover;这里有一个小介绍:https://egghead.io/lessons/misc-chrome-devtools-elements-inspect-elements-vs-view-source :) – sheriffderek
非常感谢你:)) –
试试'background-size:contain;' –
你是什么意思'background-size:cover'不适合你?发生了什么,你期待什么?你想让整个图像可见吗? –
@MichaelCoker是的,我回顾了同一个问题的另一个答案,他们告诉我要使用background-size:cover –