手機屏幕時，標題圖像正在關閉

Question

我正在爲我的own business製作網頁。我選擇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; 
    } 

} 

我使用不同尺寸的圖像對媒體查詢試過，但沒有奏效。

Here是測試場景的鏈接。如果您縮小瀏覽器以模擬手機屏幕，則圖像不會完成特寫。它必須在電話上。

Answer 1

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

應該工作。更改爲固定滾動。