使背景图像响应流体
问题描述：
我在制作背景图片时遇到麻烦，现在它只是固定的，不会随浏览器缩小。请找到的代码下面：使背景图像响应流体
.Classical {
padding-bottom: 4em;
background-image: url(http://p1.pichost.me/i/28/1515634.jpg);
width: 100%;
position:relative;
height: auto;
}
@media screen and (max-width:400px) {
.Classical {
padding-bottom: 2em;
}
}
.Classical .inner {
max-width: 80%;
padding: 3em 1em 3em 1em;
margin: 0 auto;
text-align: center;
font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
margin-top: 4em;
}
@media screen and (max-width: 800px) {
.Classical .inner {
padding: 3em .5em 3em .5em!important;
}
}
@media screen and (max-width: 700px) {
.Classical .inner {
max-width: 90%!important;
}
}
@media screen and (max-width: 500px) {
.Classical .inner {
padding: 2em 1em 2em 1em!important;
line-height: 23px!important;
}
}
@media screen and (max-width: 400px) {
.Classical .inner {
padding: 1em 1em 1em 1em!important;
margin-top: 2em;
}
}
.Classical .inner .Title {
font-family: brandon-grotesque, 'Brandon Grotesque', Futura, sans-serif;
font-size: 1.5em;
font-weight: 500;
font-weight: 500;
color: #fefd32;
letter-spacing: .2em;
text-transform: uppercase;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.Title {
font-size: 1.2em!important;
}
}
@media screen and (max-width: 500px) {
.Title {
font-size: 1em!important;
}
}
@media screen and (max-width: 400px) {
.Title {
font-size: .9em!important;
}
}
@media screen and (max-width: 370px) {
.Title {
font-size: .8em!important;
}
}
.Classical .inner .Bio-Content {
font-family: brandon-grotesque, 'Brandon Grotesque', Futura, sans-serif;
font-size: 17px;
font-weight: 500;
color: #fff;
text-align: center;
text-decoration: none;
}
.Classical .inner span {
margin-top: 2em;
margin-bottom: 2em;
}
@media screen and (max-width: 700px) {
.Classical .inner span {
margin-top: 1.5em!important;
margin-bottom: 1.5em!important;
}
}
@media screen and (max-width: 400px) {
.Classical .inner span {
margin-top: 1.2em!important;
margin-bottom: 1.2em!important;
}
}
/*STARTS HEADER, TITLE*/
.title-boom {
display: table;
width: 100%;
height: 100%;
position: relative;
z-index: 999;
background-color: black;
}
.title-bang {
display: table-row;
width: 100%;
}
.black-board {
background-position: center;
cursor: pointer;
width: 100%;
}
.black-board h1 {
display: inline-block;
font: 800 1em "proxima-nova", sans-serif;
float: left;
text-align: center;
width: 33.33%;
margin-top: 2em;
margin-bottom: 2em;
}
@media screen and (max-width: 673px) {
.black-board h1 {
font: 800 .7em "proxima-nova", sans-serif;
}
}
@media screen and (max-width: 500px) {
.black-board h1 {
font: 800 .6em "proxima-nova", sans-serif;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
}
@media screen and (max-width: 400px) {
.black-board h1 {
font: 800 .5em "proxima-nova", sans-serif;
}
}
@media screen and (max-width: 500px) {
.black-board a {
letter-spacing: 6px!important;
}
}
@media screen and (max-width: 400px) {
.black-board a {
letter-spacing: 3px!important;
}
}
.black-board h1 a:hover {
text-decoration: none;
color: #fefd32;
}
.black-board a {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 8px;
color: #fff;
}
/*ENDS HEADER, TITLE*/
.box {
background-color: #5c9cfd;
width: 57.5%;
margin: 0 auto;
}
@media screen and (max-width: 700px) {
.box {
width: 70%!important;
}
}
@media screen and (max-width: 450px) {
.box {
width: 85%!important;
}
}
@media screen and (max-width: 400px) {
.box {
width: 100%!important;
}
}<div class="Classical">
<header class="title-boom">
<div class="title-bang">
<div class="black-board">
<h1><a href="#">Events</a></h1>
<h1><a href="#">Design</a></h1>
<h1><a href="#"target="_blank">Papers</a></h1>
</div>
<!--END BLACK-BOARD-->
</div>
<!--END TITLE-BANG-->
</header>
<!--TITLE-BOOM-->
<!--BIOGRAPHY-->
<div class="box animated bounceInUp">
<div class="inner">
<a class="Title">Dummy</a>
<br>
<span class="underline"></span>
<a class="Bio-Content">
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. <br><br>Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.<br><br>
</a>
</div>
<!--ENDS INNER-->
</div>
<!--ENDS BOX-->
</div>
<!--ENDS CLASSICAL-->
答
其中一个合适的方法这里设置搜索摹背景大小：覆盖，所以背景图片将随时调整，以覆盖所有的容器的宽度和高度不改变长宽比：
.your-container {
background: url('path/to/your/image.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
检查this fiddle，我认为这是你在找什么
答
+0
小提琴https://jsfiddle.net/tpp2nwog/2/ –
是的，这是一个！ :) –