React中react-image-magnifiers图片放大异常及实现方案求助

使用react-image-magnifiers库的SideBySideMagnifier组件实现图片放大时，hover图片后放大图偏移至右上方而非原图右侧，且图片未被放大。需要解决该库的适配问题，或提供React手动实现图片放大的方案。

现有React代码 #

import React, { useState } from "react";
import { SideBySideMagnifier } from "react-image-magnifiers";
import image from './tree.jpg';
import './App.css';

const Grid = () => {
  return (
    <div className="input-grid">
      <div className="input-container">
        <label htmlFor="x1">x1:</label>
        <input type="text" id="x1" />
      </div>
      <div className="input-container">
        <label htmlFor="x2">x2:</label>
        <input type="text" id="x2" />
      </div>
      <div className="input-container">
        <label htmlFor="y1">y1:</label>
        <input type="text" id="y1" />
      </div>
      <div className="input-container">
        <label htmlFor="y2">y2:</label>
        <input type="text" id="y2" />
      </div>
    </div>
  );
};

const Coordinates = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [clickPosition, setClickPosition] = useState({ x: null, y: null });
  const [hovering, setHovering] = useState(false);

  const handleMouseMove = (event) => {
    setMousePosition({ x: event.clientX, y: event.clientY });
    const image = document.getElementById('rocker-img');
    if (event.clientX > image.offsetLeft && event.clientX < image.offsetLeft + image.clientWidth
      && event.clientY > image.offsetTop && event.clientY < image.offsetTop + image.clientHeight) {
      setHovering(true);
    } else {
      setHovering(false);
    }
};

 const handleClick = (event) => {
    setClickPosition({ x: mousePosition.x, y: mousePosition.y });
  };

  const handleClearClick = (event) => {
    setClickPosition({ x: null, y: null });
  };

  return (
    <div className="container">
      <div className="image-container">
        <SideBySideMagnifier
          imageSrc={image}
          imageAlt="Example"
        />
      </div>
      <div className="empty-div"></div>
      <div className="coords-container">
        <p className="coords">X: {mousePosition.x}</p>
        <p className="coords2">Y: {mousePosition.y}</p>
      </div>
      <div className="text-box-container">
        <label htmlFor="coordinates">Coordinates: </label>
        <input type="text" id="coordinates" value={clickPosition.x !== null ? `(${clickPosition.x}, ${clickPosition.y})` : ''} readOnly />
        <button onClick={handleClearClick}>Clear</button>
      </div>
      <Grid />
    </div>
  );
};

export default Coordinates;

关联CSS代码 #

img {
  height: 350px;
  width: 350px;
  margin-top: 20px;
  margin-left: 50px;
  float: left;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 400px;
  width: 500px;
  margin-left: 50px;
}

.empty-div {
  flex-grow: 1;
}

.image-container {
  display: flex;
  position: relative;
}

.coords-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.coords {
  margin: 0;
  padding-left: 20px;
}

.coords2 {
  margin: 0 0 0 20px;
}

.crosshair {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.text-box-container button {
  margin-left: 5px;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-top: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-container label {
  margin-right: 5px;
}

.input-container input {
  margin-left: 5px;
}

解决方案 #

一、修复react-image-magnifiers组件问题 #

问题根源是全局CSS样式和容器布局冲突，按以下步骤调整：

1. 隔离全局img样式
   全局img的float: left和固定margin会破坏组件内部布局，修改为仅作用于非组件图片：

/* 替换原全局img样式 */
img:not(.react-image-magnifiers__img) {
  height: 350px;
  width: 350px;
  margin-top: 20px;
  margin-left: 50px;
  float: left;
}

2. 调整容器布局
   container的固定宽高限制了横向空间，导致放大图无法正常显示在右侧：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 取消居中，避免挤压横向空间 */
  justify-content: space-between;
  min-height: 400px; /* 用min-height替代固定height */
  width: auto; /* 去掉固定width，自适应内容宽度 */
  margin-left: 50px;
}

3. 配置组件核心属性
   给SideBySideMagnifier添加放大比例和尺寸参数，确保放大功能生效：

<SideBySideMagnifier
  imageSrc={image}
  imageAlt="Example"
  magnifierRatio={2} // 设置2倍放大
  imageWidth={350} // 原图宽度
  imageHeight={350} // 原图高度
  fillAvailableSpace={false} // 关闭自适应，保持固定尺寸
/>

二、React手动实现图片放大功能 #

如果不想依赖第三方库，可通过原生事件和CSS定位实现侧边放大：

完整代码示例

import React, { useState, useRef } from "react";
import image from './tree.jpg';
import './App.css';

const Grid = () => {
  return (
    <div className="input-grid">
      <div className="input-container">
        <label htmlFor="x1">x1:</label>
        <input type="text" id="x1" />
      </div>
      <div className="input-container">
        <label htmlFor="x2">x2:</label>
        <input type="text" id="x2" />
      </div>
      <div className="input-container">
        <label htmlFor="y1">y1:</label>
        <input type="text" id="y1" />
      </div>
      <div className="input-container">
        <label htmlFor="y2">y2:</label>
        <input type="text" id="y2" />
      </div>
    </div>
  );
};

const Coordinates = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [clickPosition, setClickPosition] = useState({ x: null, y: null });
  const [hovering, setHovering] = useState(false);
  const [zoomPos, setZoomPos] = useState({ x: 0, y: 0 });
  const imgRef = useRef(null);

  const handleMouseMove = (event) => {
    setMousePosition({ x: event.clientX, y: event.clientY });
    const img = imgRef.current;
    if (!img) return;

    const rect = img.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 判断是否hover在原图范围内
    const isHover = x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
    setHovering(isHover);

    if (isHover) {
      // 计算放大图偏移量（2倍放大）
      setZoomPos({
        x: -(x * 2 - rect.width / 2),
        y: -(y * 2 - rect.height / 2)
      });
    }
  };

  const handleClick = (event) => {
    setClickPosition({ x: mousePosition.x, y: mousePosition.y });
  };

  const handleClearClick = (event) => {
    setClickPosition({ x: null, y: null });
  };

  return (
    <div className="container">
      <div className="image-container">
        {/* 原图 */}
        <img
          ref={imgRef}
          src={image}
          alt="Example"
          className="original-img"
          onMouseMove={handleMouseMove}
          onMouseOut={() => setHovering(false)}
          onClick={handleClick}
        />
        {/* 放大图容器 */}
        {hovering && (
          <div className="zoom-img-container">
            <img
              src={image}
              alt="Zoomed Example"
              className="zoom-img"
              style={{ transform: `translate(${zoomPos.x}px, ${zoomPos.y}px)` }}
            />
          </div>
        )}
      </div>
      <div className="empty-div"></div>
      <div className="coords-container">
        <p className="coords">X: {mousePosition.x}</p>
        <p className="coords2">Y: {mousePosition.y}</p>
      </div>
      <div className="text-box-container">
        <label htmlFor="coordinates">Coordinates: </label>
        <input type="text" id="coordinates" value={clickPosition.x !== null ? `(${clickPosition.x}, ${clickPosition.y})` : ''} readOnly />
        <button onClick={handleClearClick}>Clear</button>
      </div>
      <Grid />
    </div>
  );
};

export default Coordinates;

对应CSS修改

/* 原图样式 */
.original-img {
  height: 350px;
  width: 350px;
  margin-top: 20px;
  margin-left: 50px;
}

/* 放大图容器 */
.zoom-img-container {
  width: 350px;
  height: 350px;
  overflow: hidden;
  margin-left: 10px;
  margin-top: 20px;
}

/* 放大图（2倍尺寸） */
.zoom-img {
  width: 700px;
  height: 700px;
  position: relative;
}

/* 容器布局调整 */
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 400px;
  width: auto;
  margin-left: 50px;
}

/* 保留原有其他样式 */
.image-container {
  display: flex;
  position: relative;
}

.empty-div {
  flex-grow: 1;
}

.coords-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.coords {
  margin: 0;
  padding-left: 20px;
}

.coords2 {
  margin: 0 0 0 20px;
}

.crosshair {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.text-box-container button {
  margin-left: 5px;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-top: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-container label {
  margin-right: 5px;
}

.input-container input {
  margin-left: 5px;
}

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