如何根據視口的寬度/高度計算將背景圖像移位多少

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);
}

該用例的背景是我們有多個場景（幻燈片）。 為了獲得最佳效果，應該將第一張幻燈片和最后一張幻燈片（背景的第一部分和最后一部分）放血，這意味着它們將顯示背景的一部分，但不能與您的內容一起使用。