Javascript 如何根据视口宽度/高度计算背景图像的偏移量

我的背景图像是6830px 768px。我也有在页面中心的内容。背景设置为使用

background-size: cover;
background-position: 0 50%;

---

当用户完成步骤时，背景需要设置动画（向左滚动到非常宽背景中的另一个场景）。每个场景的设计速度为1366px 768px。因此，当窗口高度为768px时，每一步都需要将背景移动1366px。当视口分辨率完全相同时，可以很容易地将背景动画设置到位，但是如果它较大/较小，则需要计算背景移动量。这就是我一直在努力解决的问题。根据与背景大小相比的视口大小计算滚动量需要什么数学运算？

背景大小：封面6830px

，则code>将破坏一切，一个小的修复方法是将背景大小更改为

自动100%

解决您的问题的一个方法是使用Luke提到的百分比，但您必须小心，因为使用

背景位置时百分比的工作方式不同

仍然存在视口纵横比变化的问题，在完美世界中，它总是
1366:768
。您必须通过在视口顶部或底部或两者的外部使用空格或空格来进行折衷。取决于视口的给定比率

必须在高度上做出折衷，因为每个场景（我假设）的固定长度为1366像素

最后是解决方案：

我们将从场景0开始，bg pos的值将为
0%50%


bg-x-pos的后续值将遵循公式
100%/（n-x）


其中n是场景总数，x是场景编号

4个场景的示例

场景0:
背景位置：0%50%

场景一：
背景位置：33.333%50%

场景二：
背景位置：66.666%50%

场景三：
背景位置：100%50%
谢谢@Luke&@jkris的建议。然而，这个问题更为复杂，但我已经想出了一个解决方案。对于遇到相同问题的任何人，此功能可能会帮助您：

calcBgPosition (slideNum) {
  let slideW = 1366;
  let slideH = 768;
  let winH = window.innerHeight;
  let winW = window.innerWidth;

  // Because the height determines the background scale we must multiply the width by the height scale to ensure calculations are correct
  let adjustedSlideW = slideW * (winH / slideH); 

  // In order to center the background we must first calculate the offset
  // then subtract the current slide position
  return ((winW - adjustedSlideW) / 2) - (adjustedSlideW * slideNum);
}

这个用例的背景是我们有多个场景（幻灯片）。为了获得最佳效果，第一张和最后一张幻灯片（背景的第一部分和最后一部分）应该是出血幻灯片，这意味着它们将显示部分背景，但不会用于您的内容。
我总是在纸上绘制这些场景，以形象化我必须计算的宽度。将其更改为百分比，您的6830是100%，1366是20%，因此，每个场景都会将背景移动20%