为什么响应停止

Question

我试图建立这个英雄形象，它需要响应。我还没有添加我的@media CSS，但默认情况下，这个图像我不应该在这里与页面一起缩放吗？它的宽度大约为1107像素。

＆＃13;

＆＃13;

.wrapper-home{ 
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}

#hero-image-home{
  background-image:url(http://www.destinationworcester.org/wp-content/uploads/2015/10/halloween-central-mass-blog.jpg);
  position:relative;
  height:640px;
  background-repeat:no-repeat;
}

.header-home {
  position:absolute;
  top:50%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:36px;
  -ms-transform: translate(0,-50%); /* IE 9 */
   	-webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);  

}

.header-home h1 {
	font-size: 36px;
    line-height: 1.2;
    font-weight: bold;
}

.header-home h2 {
    font-size: 18px;
}

＆＃13;

<div class="wrapper-home">
  <div id="hero-image-home">
    <div class="header-home">
      <h1>asg sfgasfjkhjhsdg  sdjagk jfjasdgh f</h1>
      <h2>asjkldfh sdjklfh lasdjkfh ajklsdfh lkajsdf</h2>
     
    </div>
  </div>
  
 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

background-size: 100%;

可以帮助您缩放背景图像。

＆＃13;

＆＃13;

.wrapper-home{ 
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}

#hero-image-home{
  background-image:url(http://www.destinationworcester.org/wp-content/uploads/2015/10/halloween-central-mass-blog.jpg);
  position:relative;
  height: 640px;
  background-repeat:no-repeat;
  background-size: 100%;
}

.header-home {
  position:absolute;
  top:50%;
  text-align:center;
  width:100%;
  color:#fff;
  font-size:36px;
  -ms-transform: translate(0,-50%); /* IE 9 */
   	-webkit-transform: translate(0,-50%); /* Safari */
    transform: translate(0,-50%);  

}

.header-home h1 {
	font-size: 36px;
    line-height: 1.2;
    font-weight: bold;
}

.header-home h2 {
    font-size: 18px;
}

＆＃13;

<div class="wrapper-home">
  <div id="hero-image-home">
    <div class="header-home">
      <h1>asg sfgasfjkhjhsdg  sdjagk jfjasdgh f</h1>
      <h2>asjkldfh sdjklfh lasdjkfh ajklsdfh lkajsdf</h2>
     
    </div>
  </div>
  
 
</div>

＆＃13;

＆＃13;

＆＃13;