当前位置：首页 > React

react实现图片放大

2026-01-26 18:17:46React

实现图片放大功能的方法

使用CSS transform实现基础放大

通过CSS的transform: scale()属性实现图片悬停放大效果。为图片添加悬停样式，设置过渡动画使效果更平滑。

.image-container {
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.zoom-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.zoom-image:hover {
  transform: scale(1.2);
}

function ZoomImage() {
  return (
    <div className="image-container">
      <img 
        src="your-image.jpg" 
        alt="Zoomable" 
        className="zoom-image"
      />
    </div>
  );
}

使用react-zoom-pan-pinch库

安装专业缩放库实现更复杂的交互功能，支持手势缩放和平移。

npm install react-zoom-pan-pinch

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

function AdvancedZoom() {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="your-image.jpg" alt="Zoomable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

实现模态框放大显示

点击图片后在模态框中显示放大版本，适合需要查看细节的场景。

import { useState } from 'react';

function ModalZoom() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <img 
        src="your-image.jpg" 
        alt="Click to zoom" 
        onClick={() => setIsOpen(true)}
        style={{ cursor: 'pointer' }}
      />

      {isOpen && (
        <div className="modal" onClick={() => setIsOpen(false)}>
          <img 
            src="your-image.jpg" 
            alt="Enlarged" 
            style={{ maxWidth: '90vw', maxHeight: '90vh' }}
          />
        </div>
      )}
    </>
  );
}

添加放大镜效果

创建局部放大效果，鼠标移动时显示指定区域的放大版本。

react实现图片放大

function Magnifier({ imgSrc, zoomLevel = 2 }) {
  const [position, setPosition] = useState({ x: 0, y: 0, show: false });

  const handleMouseMove = (e) => {
    const { left, top, width, height } = e.target.getBoundingClientRect();
    const x = ((e.pageX - left) / width) * 100;
    const y = ((e.pageY - top) / height) * 100;
    setPosition({ x, y, show: true });
  };

  return (
    <div style={{ position: 'relative' }}>
      <img
        src={imgSrc}
        onMouseMove={handleMouseMove}
        onMouseLeave={() => setPosition({ ...position, show: false })}
        style={{ display: 'block' }}
      />
      {position.show && (
        <div style={{
          position: 'absolute',
          pointerEvents: 'none',
          width: '200px',
          height: '200px',
          backgroundImage: `url(${imgSrc})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: `${100 * zoomLevel}%`,
          backgroundPosition: `${position.x}% ${position.y}%`,
          borderRadius: '50%',
          border: '2px solid white',
          left: `${position.x}%`,
          top: `${position.y}%`,
          transform: 'translate(-50%, -50%)'
        }} />
      )}
    </div>
  );
}