如何根据视口的宽度/高度计算将背景图像移位多少

Question

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

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

随着用户逐步执行操作，背景需要进行动画处理（向左滚动到背景很宽的另一个场景）。 每个场景的设计像素为1366px x 768px。 因此，当窗口高度为768px时，每个步骤都需要将背景偏移1366px。 当视口分辨率完全相同时，将背景设置为动画很容易，但是，如果视口分辨率大/小，则需要计算要移动背景的程度。 这就是我一直在努力的。 根据视口大小与背景大小进行比较来计算滚动量所需的数学运算是什么？

Answer 1

background-size: cover; 如果由于某种奇怪或合法的原因，视口的高度大于6830px ， 6830px ，一个小解决方案是将背景大小更改为auto 100% ；

解决您的问题的方法是使用如Luke所述的百分比，但是您必须小心，因为在使用background-position时百分比的工作方式有所不同，这是一篇详尽的文章

视口的宽高比仍然存在问题，在理想情况下，视口始终是1366:768 。 您必须通过留有空白或在视口的顶部或底部或两者兼而有之来妥协。 取决于给定的视口比例。

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

最后的解决方案：
我们将从场景0开始，bg-pos的值将为0% 50%
bg-x-pos相应值将遵循公式100% / (nx)
其中n是场景总数，x是场景编号。

4个场景的例子

场景0： background-position: 0% 50%;
场景1： background-position: 33.333% 50%;
场景2： background-position: 66.666% 50%;
场景3： background-position: 100% 50%;

Answer 2

感谢@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);
}

该用例的背景是我们有多个场景（幻灯片）。 为了获得最佳效果，应该将第一张幻灯片和最后一张幻灯片（背景的第一部分和最后一部分）放血，这意味着它们将显示背景的一部分，但不能与您的内容一起使用。