React使用react-image-marker时父容器与渲染后图片尺寸匹配问题求解

实现思路 #

核心逻辑是在图片加载完成后，获取图片经object-fit:contain渲染后的实际可视尺寸，同步设置给父级.image-marker容器，保证容器与可视图片区域完全重合，标记点就只会落在图片范围内。同时监听窗口缩放事件，适配窗口尺寸变化后的图片大小调整。

完整代码示例 #

组件逻辑部分 #

import { useRef, useEffect, useState } from 'react';
import ImageMarker from 'react-image-marker';

function MarkerComponent(props) {
  const [markers, setMarkers] = useState([]);
  const markerContainerRef = useRef(null);

  const syncMarkerContainerSize = () => {
    const markerWrapper = markerContainerRef.current?.querySelector('.image-marker');
    const imgEl = markerContainerRef.current?.querySelector('.image-marker__image');
    if (!markerWrapper || !imgEl) return;
    // 读取img渲染后的实际宽高，同步给父容器
    markerWrapper.style.width = `${imgEl.offsetWidth}px`;
    markerWrapper.style.height = `${imgEl.offsetHeight}px`;
  };

  useEffect(() => {
    const imgEl = markerContainerRef.current?.querySelector('.image-marker__image');
    if (!imgEl) return;

    // 图片加载完成后同步尺寸
    imgEl.addEventListener('load', syncMarkerContainerSize);
    // 窗口大小变化时重新同步尺寸
    window.addEventListener('resize', syncMarkerContainerSize);
    // 兜底处理已缓存的图片，避免load事件不触发
    if (imgEl.complete) syncMarkerContainerSize();

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      imgEl.removeEventListener('load', syncMarkerContainerSize);
      window.removeEventListener('resize', syncMarkerContainerSize);
    };
  }, [props.asset.url]); // 图片地址变更时重新绑定逻辑

  return (
    <div ref={markerContainerRef}>
      <ImageMarker
        src={props.asset.url}
        markers={markers}
        onAddMarker={(marker) => setMarkers([...markers, marker])}
        className="object-fit-contain image-marker__image"
      />
    </div>
  );
}

CSS调整部分 #

/* 可根据业务需求调整最大显示区域限制 */
.image-marker {
  max-width: 100%;
  max-height: 80vh;
}

.image-marker__image {
  object-fit: contain !important;
  max-width: 100%;
  max-height: 80vh;
}

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