多个 div（一些有和没有背景附件：固定）共享背景图像/背景大小的奇怪结果属性

Question

HTML

<html>
  <head>
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="top"></div>
    <div id="bot">
      <div id="one"></div>
      <div id="two"></div>
      <div id="thr"></div>
      <div id="fou"></div>
    </div>
    <script src="test.js"></script>
  </body>
</html>

CSS

#top {
    height: 100vh;
}

#bot {
    width: 100vw;
    height: 100vh;
    display: flex;
}

    #one, #two, #thr, #fou {
        flex: 1;
        background: url('image.jpg');
    }

    #one, #thr {
        background-attachment: fixed;
    }

JS

function whatever() {
    var oneW = one.clientWidth;
    two.style.backgroundPosition = '-' + oneW + 'px 0';
    fou.style.backgroundPosition = '-' + oneW * 3 + 'px 0';
};

我运行遇到了问题。我想创建的一般效果可以通过上面的代码实现。但是，background-image 的尺寸似乎是实际图像文件的尺寸，因为我没有创建和设置 background-size 属性，所以图像不会居中，而是如果浏览器小于图像本身，则切断。我已经尝试应用 background-size: cover，但它似乎对带有 background-attachment: fixed 的元素的影响与没有属性的元素不同，我不确定该怎么做或如何解决这个问题. 有人知道我该如何解决这个特定问题吗？在此先感谢您提供任何解决方案、帮助或想法！

更新

所以，根据我遇到的（CSS background-size: cover + background-attachment: fixed clipping background images and http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/）两个页面的信息，我添加了一些JS来调整background-attachment: fixed div的高度，这有点解决问题但不是真的。下面是附加的JS。

function whatever()
{
    ...
    var oneH = one.clientHeight;
    one.style.backgroundSize = 'auto ' + oneH + 'px';
    thr.style.backgroundSize = 'auto ' + oneH + 'px';
};

即使 background-size 设置为 cover，如果浏览器是全屏或四分之一屏，这将完美对齐图像，但无论出于何种原因，图像现在的行为就像 [=16] =] 设置为 contain。我很困惑。

更新二

我通过手动将每个 div 的大小设置为 window 的 innerWidth 和 innerHeight 的大小来解决这个问题。代码在下面的答案部分。

Answer 1

手动设置每个 div 的宽度和高度，使其与 window 作品的宽度和高度相对应。

function whatever() {
    ...
    var x = window.innerWidth;
    var y = window.innerHeight;
    one.style.backgroundSize = '' + x + 'px ' + y + 'px';
    two.style.backgroundSize = '' + x + 'px ' + y + 'px';
    thr.style.backgroundSize = '' + x + 'px ' + y + 'px';
    fou.style.backgroundSize = '' + x + 'px ' + y + 'px';
};

多个 div（一些有和没有背景附件：固定）共享背景图像/背景大小的奇怪结果属性

Multiple divs (some with and without background-attachment: fixed) sharing a background-image / Strange result with background-size property

javascript

css

background-image

background-size

多个 div（一些有和没有背景附件：固定）共享背景图像/背景大小的奇怪结果 属性

Multiple divs (some with and without background-attachment: fixed) sharing a background-image / Strange result with background-size property

javascript

css

background-image

background-size

多个 div（一些有和没有背景附件：固定）共享背景图像/背景大小的奇怪结果属性