什么是反应变焦图像？
在照片库或电子商务网站上签出图像时，您可能会想要缩放图像以获得特定区域的清晰视图。在这里，我们使用反应图像缩放功能，以便可以实现所需的功能。此功能特别用于以放大视图显示图像。当用户将鼠标悬停或有时单击时，我们会得到图像的扩展视图。基本上，此功能共有15个版本。
反应 图片缩放的组成部分：
以下是反应图像缩放中的一些出色组件。
反应地图互动：
此功能基本上在任何react元素上添加地图，例如缩放或平移。触摸设备和鼠标设备都可以使用此功能。使用触摸板时，要放大图像，请先捏住它。要平移图像，我们需要将其拖动。对于鼠标或触控板，我们必须滚动滚轮才能获得缩放的图像。而且我们必须拖动鼠标才能平移图像。
反应 Zoom Pan Pinch：
它支持一个简单的缩放平移，并捏住许多标记语言dom组件，例如图片和div。
反应图像放大：
这也是用于触摸板和鼠标的响应式反应图像缩放组件之一。就地和并排图像放大，正负空间镜选项，交互提示，可配置的放大图像尺寸，可选的放大图像外部渲染，悬停意图，长按手势，淡入淡出过渡，基本的反滑轮播支持我们可以在React Image中找到一些放大功能。
反应图像放大：
它是React组件，可在悬停时缩放图像。
反应图像缩放：
我们主要在浏览器中使用此组件，以便获得缩放的图像。要获得缩放的图像，只需将鼠标悬停。
反应 Pinch缩放平移：
这是一个反应组件，使我们能够添加捏缩放和平移缩放的图像功能。要在桌面上使用它，首先，需要按住Alt键。之后，只需将鼠标从内部内容的中心向下拖动到边缘即可。
反应 SVG Pan zoom：
它将平移和缩放选项添加到Svg。
反应Prismazoom：
它使平移和缩放功能能够使用CSS转换做出反应。
反应中等图像缩放：
它提供Medium.com样式的图像缩放以进行反应。这是Medium.com的缩放图像的React.js实现的库。它允许低分辨率和高分辨率图像一起工作，以获得缩放图像。无论隐藏的父元素还是具有transform属性的父元素，它都可以正常工作。
响应式捏捏缩放：
它允许在移动设备和台式机上缩放和平移图像或画布。借助此功能，可以轻松获得最小和最大设置。
图像缩放的安装和使用：
安装：
我们可以在npm的帮助下安装React image zoom。
npm install react-image-zoom–save
道具类型：
- 宽度：此功能基本上是为图像分配宽度。知道值必须是数字是非常重要的。 （需要）
- height：确定图像的高度。像宽度一样，值必须是数字。 （可选的）
- zoomWidth：描述缩放图像的宽度。又是一个数字。 zoomHeight与原始图像的高度相同。 （可选的）
- img：如果容器不包含元素作为标记，则使用源图像的URL。应该是一个字符串。
- 标尺：这是缩放比例。如果我们不提供比例，那么它将基本上计算出该图像的自然尺寸。
- offset：用于缩放图像的偏移量。需要一个垂直数字和一个水平数字。
- zoomStyle：基本上，它将自定义样式应用于缩放的图像。
- zoomLensStyle：在这里，它仅将自定义样式应用于变焦镜头。
- zoomPosition：定义缩放图像的位置。它的属性基本上是上，左，下，原始和右。默认情况下，它适用。