JavaScript缩放图像和中心可视区域

我正在尝试在单击按钮时创建可缩放图像，但是图像应该在可视区域上居中放大，因为图像可能比容器大。

我在这里创建了一个小提琴来说明我想要的东西，我显然通常会将图像隐藏在容器外面，我现在不会对这个部分感到困扰，也会放入边框覆盖以显示容器的边界。

我已根据图像比例完成了缩放部分，我只需要计算出新的顶部和左侧css值，并在缩放后将其应用于图像。 此外，图像也可以拖动，因此一旦移动图像，就必须考虑图像的位置。

基本上，红色容器内图像的中心点必须在缩放后保持不变，因此您可以有效地放大容器中间的任何内容。

http://jsfiddle.net/wFaFg/1/

why do you we need code to link to jsfiddle? 

谢谢

编辑：

http://jsfiddle.net/FU55w/

与上面的小提琴接近，但仍然没有完全放大中心点

Answer 1

所以我找到了解决方案，

它比仅仅找出图像尺寸增加了多少稍微复杂一些。

我计算出容器内图像中心点的x和y值，取左边和上边的值，将其转为正值，然后加上容器宽度和高度的一半。

 var x = Math.abs(image.position().left) + container.width() / 2 var y = Math.abs(image.position().top) + container.height() / 2 

我通过将新宽度除以旧宽度来计算出图像比例的比例，然后我可以将x和y值乘以比率。

然后将新x和y之间的差异从当前左侧和顶部移开。

 image.position().left - (newX - x) image.position().top - (newY - y) 

完整的小提琴： http ： //jsfiddle.net/phHqQ/

Answer 2

根据您的评论尝试新的小提琴：

http://jsfiddle.net/wFaFg/6/

 $("#zoom").on("click", function(e) { var container = $("#container"); var image = $("#container img"); var curLeft = image.position().left; var curTop = image.position().top; var ratio = image.height() / image.width(); image.css({ height: image.height() + (20 * ratio), width: image.width() + (20 * ratio), left: curLeft - ((20 * ratio)/2), top: curTop - ((20 * ratio)/2) }); }); 

Answer 3

http://www.hklabs.org/articles/image_zooming_with_javascript

这是我在同一主题上做的优秀教程！ 使用单独的背景分割作为图像的一部分。 图像的其他部分可以用background-repeat隐藏：no-repeat; 现在使用background-position属性在分区内移动你的图像！