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

参见示例 - Fiddle

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;
}

检查this fiddle，我认为这就是您要找的内容

制作背景图像响应流体

2 个答案: