英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

react-图片放大

用于触摸和鼠标的响应式 React 图片放大组件。

为购物网站产品详情设计。

功能包括：

• 原地和并排图像放大
• 正负空间导向镜选项
• 交互提示
• 可配置的放大图像尺寸
• 可选的放大图像外部渲染
• 悬停意图
• 长按手势
• 渐隐过渡
• 基本 react-slick 轮播支持

状态

演示

请访问 react-image-magnify 演示网站

在 CodePen 上 实时实验 react-image-magnify。使用 “更改视图” 按钮选择编辑模式或不同的布局选项。使用 “Fork” 按钮保存您的更改。

安装

npm install react-image-magnify

使用

如果您从 v1x 升级到 v2x，请参阅发行说明。

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    smallImage: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    },
    largeImage: {
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

在示例项目中查看更多使用示例。

必需属性

可选样式属性

可选交互属性

可选行为属性

小图像

{
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required if isFluidWidth is not set)
    height: Number, (required if isFluidWidth is not set)
    isFluidWidth: Boolean, (default false)
    alt: String,
    onLoad: Function,
    onError: Function
}

有关响应式图像的更多信息，请参考以下资源：
响应式图像 101
响应式图像 - srcset 和 sizes 属性

大图

{
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required)
    height: Number, (required)
    alt: String, (defaults to empty string)
    onLoad: Function,
    onError: Function
}

支持

请提交一个问题。

示例项目

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
npm install
npm run build
cd example
yarn
yarn start

如果您的默认浏览器未自动启动，请打开一个新的浏览器窗口并访问 localhost:3000

开发

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
npm install
npm run #See available commands

示例项目 可在开发中使用。

要在进行更改时自动重新构建源代码，请运行 yarn run build-watch。

贡献

请使用 Github Flow 进行贡献。创建一个分支，添加提交，并 打开一个拉取请求。

归属

感谢以下社区成员提出问题和拉取请求。

@damien916 @colepatrickturner @andreatosatto90 @nathanziarek @hombrew @smashercosmo @sk1e @vidries @ionutzp @sbloedel @spiderbites @Akarshit @eddy20vt @evannoronha @benjaminadk @nilsklimm @m4recek @yaser-ali-vp @carlgunderson @tojvan @kskonecka @Coriou

你太棒了！✨💫

许可证

麻省理工学院