如何基于Bootstrap列宽为React ImageMapper设置对应像素值的width属性

推荐实现方式（适配热点区域场景） #

因为react-image-mapper的热点区域坐标是基于传入的width属性计算的，所以必须动态传入和父列实际宽度一致的数值，才不会出现坐标错位问题，推荐使用ResizeObserver实现：

1. 给存放ImageMapper的Col组件绑定ref，用于获取DOM元素
2. 用状态存储当前列的实际宽度
3. 组件挂载时先获取一次列宽，同时用ResizeObserver监听列的尺寸变化，自动更新宽度值
4. 把状态里的宽度值传给ImageMapper的width属性

参考代码如下：

import { useRef, useState, useEffect } from 'react';
import { Row, Col } from 'react-bootstrap';
import ImageMapper from 'react-image-mapper';

const FootballFieldComponent = () => {
  const thirdColRef = useRef(null);
  // 初始值可设置为对应断点下的预估宽度，或者直接设0
  const [colWidth, setColWidth] = useState(0);

  useEffect(() => {
    if (!thirdColRef.current) return;

    // 读取列宽的方法
    const updateColWidth = () => {
      // clientWidth会自动排除border、滚动条宽度，包含padding，可根据实际需求调整为offsetWidth
      const currentWidth = thirdColRef.current.clientWidth;
      setColWidth(currentWidth);
    };

    // 初始化读取宽度
    updateColWidth();

    // 监听列的尺寸变化
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setColWidth(entry.contentRect.width);
      }
    });
    observer.observe(thirdColRef.current);

    // 组件卸载时销毁监听，避免内存泄漏
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <>
      <Row>
        <Col md={5} />
        <Col md={2} />
        <Col md={5} ref={thirdColRef}> 
          <div
            style={{
              display: "flex",
              justifyContent: "center",
            }}
          >
            {/* 宽度读取完成后再渲染组件，避免初始值异常导致的变形 */}
            {colWidth > 0 && (
              <ImageMapper
                id="football-field"
                src={footballField}
                alt="football-field"
                width={colWidth}
                map={MAP}
              />
            )}
          </div>
      </Row>
    </>
  );
};

注意事项 #

• 如果你的MAP配置是基于原图尺寸写的，需要按当前列宽 / 原图宽度的比例，动态缩放所有热点区域的坐标和尺寸，才能保证热点位置正确。
• 如果你的场景只有窗口缩放会导致列宽变化，也可以用window.resize事件替代ResizeObserver，缺点是无法监听到布局内部变化（比如侧边栏收起、其他元素尺寸变化）导致的列宽变动。

轻量替代方案（仅适用无热点区域场景） #

如果你不需要使用ImageMapper的热点点击功能，可以直接用CSS控制图片自适应，不需要写JS逻辑：

#football-field img {
  max-width: 100%;
  height: auto !important;
}

该方案会导致热点区域坐标和实际图片位置错位，有热点需求不要使用

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