如何通过CSS根据窗口宽度调整元素垂直位置以匹配背景图？

你的问题核心是：背景图按窗口宽度缩放，而元素的top百分比基于窗口高度计算，两者缩放逻辑不一致导致错位。以下是两种可行的解决方法：

方法一：用CSS固定宽高比容器（推荐，纯CSS实现） #

如果你的背景图有固定宽高比（比如16:9、4:3），可以给背景图套一个容器，让容器的高度随宽度按比例自动调整，元素的定位基于这个容器而非窗口，就能保证位置对应。

步骤代码：

/* 背景图容器 */
.bg-container {
  position: relative;
  width: 100%;
  /* 替换成你的背景图实际宽高比，比如1920x1080就是16/9 */
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* 背景图样式 */
.bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
}

/* 需要定位的元素 */
.content-element {
  position: absolute;
  left: 30%;
  top: 60%;
  /* 其他自定义样式 */
}

这样容器的高度会始终和宽度保持固定比例，元素的top和left百分比基于容器计算，完全匹配背景图的缩放。

方法二：用JavaScript动态计算位置（适合灵活场景） #

如果背景图没有固定宽高比，或者需要更复杂的适配逻辑，可以通过JS监听窗口尺寸变化，动态计算元素的top值。

步骤代码：

// 先加载背景图获取原始尺寸
const bgImg = new Image();
bgImg.src = '你的背景图路径';

bgImg.onload = function() {
  const originalBgWidth = bgImg.width;
  const originalBgHeight = bgImg.height;
  const elementVerticalRatio = 0.6; // 元素在背景图上的垂直占比（原60%）
  const targetElement = document.querySelector('.content-element');

  // 计算并更新元素位置的函数
  function updatePosition() {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    
    // 计算当前背景图按宽度缩放后的高度
    const currentBgHeight = (windowWidth * originalBgHeight) / originalBgWidth;
    // 计算背景图垂直居中时的偏移量
    const bgVerticalOffset = Math.max(0, (windowHeight - currentBgHeight) / 2);
    // 元素的top值 = 背景图偏移量 + 元素在背景图上的对应位置
    const elementTop = bgVerticalOffset + elementVerticalRatio * currentBgHeight;

    targetElement.style.top = `${elementTop}px`;
  }

  // 初始化执行一次
  updatePosition();
  // 监听窗口 resize 事件，实时更新
  window.addEventListener('resize', updatePosition);
}

这段代码会根据背景图的原始比例，计算出当前窗口下背景图的实际高度，再算出元素应该对应的垂直位置，确保始终和背景图的特定区域对齐。

内容的提问来源于stack exchange，提问作者ldor