javascript - 如何根据视口(viewport)宽度/高度计算移动背景图像的量

Question

我有一张 6830 像素 x 768 像素的背景图片。我也有在页面中居中的内容。后台设置使用

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

随着用户逐步进行，背景需要动画(向左滚动到非常宽的背景中的另一个场景)。每个场景都设计为 1366 像素 x 768 像素。所以当窗口高度为768px时，每一步都需要将背景平移1366px。当视口(viewport)分辨率完全相同时，很容易将背景设置为动画，但是如果它很大/较小，那么我需要计算移动背景的程度。这就是我一直在努力解决的问题。根据与背景大小相比的视口(viewport)大小计算滚动量需要什么数学？

Answer 1

background-size: cover; 如果出于某些奇怪或合法的原因，视口(viewport)的高度大于 6830px，将会破坏内容，一个小的修复将是将背景大小更改为 auto 100%;

如 Luke 所述，您的问题的解决方案是使用百分比，但您必须小心，因为使用 background-position 时百分比的工作方式不同这里是 elaborate article about it

仍然存在有关视口(viewport)纵横比变化的问题，在完美的世界中它始终是 1366:768。您必须通过在顶部或底部或两者的视口(viewport)外留出空白或留出空间来做出妥协。取决于给定的视口(viewport)比例。

必须在高度上做出妥协，因为每个场景(我假设)都是 1366 像素的固定长度。

终于解决了:
我们将从场景 0 开始，bg-pos 的值为 0% 50%
bg-x-pos 的结果值将遵循公式 100%/(n-x)
其中n为场景总数，x为场景编号。

4个场景的例子

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