使背景图像响应流畅

Question

我在使背景图片变得流畅时遇到了麻烦，目前它只是固定的，不会随着浏览器缩小。 请在下面找到代码：

 .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--> 

https://jsfiddle.net/kadeemlaurie/tpp2nwog/

Answer 1

参见示例- 小提琴

的CSS

background-repeat:no-repeat;
background-size:contain;
background-position:center;

Answer 2

此处合适的方法之一是设置background-size：cover ，因此背景图像将始终进行调整以覆盖所有容器的宽度和高度，而无需更改纵横比：

.your-container {
    background: url('path/to/your/image.jpg') center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

检查这个小提琴 ，我想这就是您想要的