css - 背景图片无法在浏览器上完全显示，甚至在移动设备上显示最差

Question

1. 我的主要背景图片适应屏幕分辨率，但图片在此过程中被截断，因此您看不到完整图片。

2. 手机/平板电脑上的图片甚至更差（更被切断）

您如何显示全图并使其适应每个浏览器/手机/平板电脑以获得全屏资源？

我什至不确定在哪里修改编码。

这段代码可能是问题吗？

 * 28.0 Section
 */

.magee-section {
  position: relative;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fullheight {
  min-height: 100vh;
}

.verticlemiddle {
  display: table;
  width: 100%;
}

.magee-section.verticlemiddle .container,
.magee-section.verticlemiddle .container-fullwidth {
  display: table-cell;
  vertical-align: middle;
}

.magee-section .background-media,
.magee-section .background-overlay {
  position: absolute;
  width: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.magee-section .background-media {
}

.magee-section .background-overlay {
}

.magee-section .container,
.magee-section .container-fullwidth {
  position: relative;
  overflow: hidden;
}

Answer 1

body {
    background: url("a.jpg") no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

并且不要忘记在 HEAD 中添加视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是小提琴：https ://jsfiddle.net/668j8xr8/