使用JavaScript在不同的；农作物“；单个大图像的

因此，我已经阅读了几十个Javascript zoom组件，但没有一个像我所寻找的那样，所以我很好奇在哪里可以找到这样的组件（如果存在的话）或者如何自己编写它

目标是将单个大型（1000x1000）图像下载到浏览器中。然后在浏览器中，图像在用户可以通过单击某个页面元素在同一元素容器中具有三种表示状态

状态1（默认）：查看整个图像，但缩小以适合500x500容器（即缩小，但不裁剪）。例如（不是按比例，而是与其他州进行比较）：

状态2：看到中间50%居中，在同一容器中（即实际大小和裁剪）。例如：

状态3：看到中间的25%，居中，在同一个容器中（即放大，裁剪了很多）。例如：

我会把在这三种状态之间切换的脚本放在一些页面元素的点击中，比如一个按钮

任何人都可以提供一个指向执行此操作的组件的链接，或者提供有关该方法如何完成此操作的建议吗

---

谢谢你的帮助

我将在这里介绍如何利用CSS

第一种情况：

1） 创建一个500x500的DIV，并将背景图像设置为该文件。确保在div上也设置了

背景大小：contain

属性

2） 对于第二种情况，我将删除

背景大小：contain

3） 第三种情况下，我将设置“背景大小：200%；”

---

如果您所描述的内容是您真正想要做的，那么可以通过一些CSS和几行javascript轻松实现：

var container=document.querySelector（'.image zoom'），
zoomBtn=document.getElementById（'zoom-it'），
i=0；
函数clickHandler（）{
如果（i==0）{
container.classList.add（'zoom-2x'）；
i++；
}else如果（i==1）{
container.classList.add（'zoom-4x'）；
i++；
}否则{
container.classList.remove（'zoom-2x'）；
container.classList.remove（'zoom-4x'）；
i=0；
}
}
zoomBtn.addEventListener（'click'，clickHandler）
.image container、.image zoom{
宽度：250px；
高度：250px；
}
.图像容器{
溢出：隐藏；
}
.image-zoom.zoom-2x{
变换：尺度（2）；
}
.image-zoom.zoom-4x{
变换：尺度（4）；
}

缩放图像
也许这篇文章会有所帮助：这是一个很好的解决方案，谢谢。但愿我能将两个答案标记为解决方案。如果我们添加3个以上的阶段，我可能会使用这些元素。