移動設備上的背景圖像拉伸站點問題

在桌面瀏覽器上查看時，我的網站看起來很不錯，但在移動設備上，背景圖像混亂了一切，並且無法實現響應。移動設備上的背景圖像拉伸站點問題

網站中的問題：這裏http://www.victorfrolov.com

是我的背景圖像中的身體CSS代碼：

body { 
    /* Location of the image */ 
    background-image: url('../img/image.jpg'); 

     /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 

     /* Background image doesn't tile */ 
    background-repeat: no-repeat; 

     /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */ 
    background-attachment: fixed; 

     /* This is what makes the background image rescale based 
    on the container's size */ 
    background-size: cover; 

    /* Set a background color that will be displayed 
    while the background image is loading */ 
    background-color: #464646; 

    background-color:#FFF; 
    /*font-family: 'Roboto', sans-serif;*/ 
    /*font-family: 'Open Sans', sans-serif;*/ 
    font-family: 'Montserrat', sans-serif; 
    color:#3E404B; 
}

這就是它看起來像在桌面上（和縮小/擴大它的工作頁面精）：

desktop image 和這裏的移動：

mobile image 這裏是視差代碼，也許這是問題？

body, 
html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
p { 
    margin: 0; 
    padding: 10px 5%; 
} 

.slide { 
    box-sizing: border-box; 
    height: auto; 
    min-height: 100%; 
    min-width: 100%; 
    background-size: cover; 
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3); 
}

請幫忙。謝謝！

來源

2015-07-22 Test

我建議你張貼您的問題的屏幕截圖，而不是一個鏈接到您的網頁。它可以被視爲垃圾郵件內容。 – FormigaNinja

確定已添加圖片 – Test

@media screen 
    and (device-width: 320px) 
    and (device-height: 640px) 
    and (orientation: portrait) { 
body { width: 100%; max-width: 100%; height: auto; 
} 
}

或者您可能需要爲您的img設置一個類。 HTML和使用.test類與相同的媒體查詢，然後使用相同的大小，但設置（方向：風景）

來源

2015-07-22 02:14:41 user3758480

頁面仍然全部混亂，但現在背景變成白色。 – Test

請分享您的新代碼，我會盡力幫助。當我第一次查看並回答這個問題時，我正在使用手機。 – user3758480

我已經在移動肖像和風景中查看了您的頁面。我會建議你也這樣做。不重複在這裏不是問題，但我需要看到html和css。你絕對需要設置最大寬度：100％;某處和身高：自動; ，但我需要查看代碼才能看到哪裏。這就是爲什麼你在手機和肖像上有一個巨大的水平滾動= nono。 – user3758480

移動設備上的背景圖像拉伸站點問題

回答

相關問題