移动设备背景滑块扭曲。 （WordPress的）

Question

我是我网站背景的整页滑块，它在桌面上运行良好。但是，当我切换到移动设备时，图片严重失真，页面左侧有一个黑色间隙，看起来并不好看。

查看附带的照片以获取视觉效果，或将其拉到手机上  网址为http://plunderfest.muvltd.com

用一些CSS解决这个问题的方法吗？

（编辑）CSS按要求：

#supersized {
display: block;
position: fixed !important;
background-size: cover !important;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}

身体背景图片css：

body {
background-image: url(http://plunderfest.muvltd.com/wp-content/uploads/2014/04/starry4.jpg) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: 100% !important;
width: 100% !important;
height: 100% !important;
}

仅限最大宽度为767px的CSS：

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .woocommerce ul.products li.product.one_fourth,
  .woocommerce-page ul.products li.product.one_fourth,
  .woocommerce ul.products li.product.one_third,
  .woocommerce-page ul.products li.product.one_third,
  .woocommerce ul.products li.product.one_half,
  .woocommerce-page ul.products li.product.one_half,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_fourth,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_fourth,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_third,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_third,
  .woocommerce .cart-collaterals .cross-sells ul.products li.one_half,
  .woocommerce-page .cart-collaterals .cross-sells ul.products li.one_half,
  .one_sixth,
  .one_fifth,
  .one_fourth,
  .one_third,
  .one_half,
  .two_third,
  .three_fourth {
    display: inline;
    float: left;
    margin-right: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .fimage-align-right,
  .fimage-align-left {
    float: none;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}

Answer 1

如果只有一张图片，为什么会使用滑块作为网站的背景？ 我建议不要使用页面滑块作为背景，而只是通过在css中使用样式来设置图像。当它调整大小时，css中会发生一些事情。如果你设置使用滑块作为背景，你需要在调整大小时通过它的CSS。

如果要使用图像，请使用css，以便不使用背景附件滚动。

 

body {
    background-image: url('your/image/location/image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
} 

有几种方法可以做到这一点，我给你快速说明使用背景附件，而不是整个css用于更改。

更新

我知道它是什么。这不是响应性，因为图像在调整大小时会缩小。尝试调整浏览器的宽度，但保持相同的高度。这是因为图像无法同时拉伸和调整大小。它将保持正确的宽高比，因此不会扭曲。一个非常快速和简单的解决方法是在照片编辑器中将黑色渐变放在该图像的最底部。这会使它看起来正在淡入场地背景，并且比在底部有一条硬线更清洁。它也可能使事情更清晰，没有背景中的空间场景那么小的尺寸。除此之外，我不知道如何调整它，如果它做了，它将不得不从该图像伸出混乱到达底部。

我发现了一些帖子here，其中人们谈论不同的解决方案，但没有太多关于此的信息。试着四处看看或看看其他人是否有想法。

除此之外，我不确定如何