如何让DOM元素随拉伸变形的图像始终保持相对位置对齐

根因分析 #

代码出现错位主要有4个核心问题：

• 父容器.slide未设置position: relative，绝对定位的标记点参照节点错误，不是相对于图片所在容器定位
• 坐标计算逻辑仅在页面初始加载时执行1次，窗口尺寸变化后没有重新计算最新坐标
• 标记点的宽高未按图片缩放比例同步调整，直接使用了原始图像上的像素值
• 未处理图片加载未完成的场景，可能拿不到正确的图片原始宽高导致计算错误

修复代码 #

CSS #

/* 新增父容器定位规则 */
.slide {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 可根据业务需求调整容器尺寸，和img展示尺寸保持一致即可 */
  width: 100%;
  height: 100vh;
}
.slide-point {
  position: absolute;
  background: red;
  /* 可选：优化星星展示，避免内容偏移 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

JS #

// 防抖函数，避免窗口缩放时频繁触发计算导致卡顿
function debounce(func, delay = 100) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 封装标记点位置更新逻辑
function updatePointsPosition() {
  const points = document.querySelectorAll(".slide-point");
  points.forEach(point => {
    const x = parseFloat(point.dataset.x);
    const y = parseFloat(point.dataset.y);
    const originH = parseFloat(point.dataset.h);
    const originW = parseFloat(point.dataset.w);

    const image = point.closest(".slide").querySelector("img");
    // 处理图片未加载完成的场景，等加载完成后再执行计算
    if (!image.complete || image.naturalHeight === 0) {
      image.onload = updatePointsPosition;
      return;
    }

    const natH = image.naturalHeight;
    const natW = image.naturalWidth;
    const clientH = image.clientHeight;
    const clientW = image.clientWidth;

    // 坐标和标记尺寸都按图片当前缩放比例调整
    point.style.left = `${x * clientW / natW}px`;
    point.style.top = `${y * clientH / natH}px`;
    point.style.width = `${originW * clientW / natW}px`;
    point.style.height = `${originH * clientH / natH}px`;
  });
}

// 页面资源加载完成后首次计算位置
window.addEventListener('load', updatePointsPosition);
// 窗口尺寸变化时重新计算位置
window.addEventListener('resize', debounce(updatePointsPosition));

HTML #

无需修改原有结构，保持原有代码即可：

<ul data-slides>
  <li class="slide" data-active>
    <div class="slide-point" data-x="240" data-y="2295" data-h="165" data-w="165">&#9733;</div>
    <div class="slide-point" data-x="512" data-y="2155" data-h="165" data-w="165">&#9733;</div>
    <img id="slide-img" src="https://via.placeholder.com/800" alt="Photo1">
  </li>
</ul>

效果说明 #

修复后调整窗口尺寸，标记点会自动匹配图片的缩放比例调整位置和大小，始终和原始图像上的坐标对应，不会出现错位。

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