移动设备上的背景图片拉伸网站问题

Question

在桌面浏览器上查看时，我的网站看起来很不错，但在移动设备上，背景图像会混淆一切，并且无法实现响应。

有问题的网站：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;
}

这就是它在桌面上的样子（缩小/放大页面工作正常）：

这是在移动设备上：

这是视差码，也许这就是问题？

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

请帮忙。谢谢！

Answer 1

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

或者你可能需要为你的img设置一个类。 html和使用.test类使用相同的媒体查询，然后使用相同的大小，但设置（方向：横向）