Css 移动屏幕显示时，标题图像正在关闭

我正在为我的朋友制作一个网页。我选择Bootstrap是因为它具有开箱即用的移动功能。我有个问题：

• 当使用手机（iPhone 5）访问网页时，标题图像会进行特写，并没有比例放大

代码如下：

#heading {
  display: block;
  width: 100%;
  height: 543px;     
  background: url('../images/header.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-shadow: inset 0 -4px 9px -3px #000;
  -moz-box-shadow: inset 0 -4px 9px -3px #000;
  box-shadow: inset 0 -4px 9px -3px #000;
}

@media(max-width:563px) {
  #heading {
    display: block;
    width: 100%;
    height: 300px;         
    background: url('../images/headerm.jpg') no-repeat center center fixed; 
  }
  #navigation .navlinks li {
    margin-right: 1px;
  }
  #navigation .navlinks li a {
    padding: 0 5px;
    font-size: 12px;
  }

}

我尝试使用不同大小的图像进行媒体查询，但没有成功

是测试场景的链接。如果缩小浏览器以模拟手机屏幕，则图像不会进行特写。它必须在电话上

@media(max-width:563px) {
  #heading {
    display: block;
    width: 100%;
    height: 300px;         
    background: url('../images/headerm.jpg') no-repeat center center scroll; 
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
  }
}

---

应该有用。将“固定”更改为滚动。

图像是否可以自动调整宽度？它不再关闭，但它不适合屏幕。可能正在再次更改图像大小？您现在可以查看以查看修改后的版本。这将使您更进一步：