QuikieApps

反应图像缩放 :使用和安装

什么是反应变焦图像?

在照片库或电子商务网站上签出图像时,您可能会想要缩放图像以获得特定区域的清晰视图。在这里,我们使用反应图像缩放功能,以便可以实现所需的功能。此功能特别用于以放大视图显示图像。当用户将鼠标悬停或有时单击时,我们会得到图像的扩展视图。基本上,此功能共有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

 

道具类型:

 

 

Exit mobile version