JavaScript 缩放图像和居中可视区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16568976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript zoom image and center viewable area
提问by Ant
I'm trying to create a zoom able image upon click of a button, however the image should be zoomed centered on the view able area, as the image may be bigger than the container.
我试图在单击按钮时创建一个可缩放的图像，但是图像应该以可视区域为中心进行缩放，因为图像可能比容器大。
I've created a fiddle here to illustrate what I want, I'd obviously usually hide the image outside the container, I'm not bothered about that part just now, also put in a border overlay to show the bounds of the container.
我在这里创建了一个小提琴来说明我想要的东西，我显然通常会将图像隐藏在容器外，我刚才不关心那部分，还放入了边框叠加层以显示容器的边界。
I've done the zoom part based on the image ratio, I just need to work out the new top and left css values and apply it to the image after the zoom. Also the image is draggable, so once you move the image it must take into account the position of the image.
我已经根据图像比例完成了缩放部分，我只需要计算出新的顶部和左侧 css 值并将其应用于缩放后的图像。此外，图像是可拖动的，因此一旦您移动图像，它必须考虑图像的位置。
Basically, the centrol point of the image within the red container must remain the same after the zoom, so you are effectly zooming in on whatever is at the middle of the container.
基本上，红色容器内图像的中心点在缩放后必须保持不变，因此您可以有效地放大容器中间的任何内容。
why do you we need code to link to jsfiddle?
Thanks
谢谢
edit:
编辑：
getting close with the above fiddle, but still not zooming completely on central point
接近上面的小提琴，但仍然没有完全放大中心点
回答by Ant
So I found the solution,
于是我找到了解决办法
It is slightly more complex than just finding out how much the image increased in size.
这比仅仅找出图像大小增加了多少要复杂一些。
I work out the x & y value of the center point of the image within the container, by taking the left and top value, turning it positive then adding half the container width and height.
我计算出容器内图像中心点的 x 和 y 值，方法是取左值和上值，将其转为正值，然后添加容器宽度和高度的一半。
var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2
I work out the ratio of the image scale by dividing the new width by the old width, then I can multiply the x & y value by the ratio.
我通过将新宽度除以旧宽度来计算图像比例的比率，然后我可以将 x & y 值乘以比率。
Then take the difference between the new x and y away from the current left and top.
然后将新的 x 和 y 之间的差值从当前的 left 和 top 移开。
image.position().left - (newX - x)
image.position().top - (newY - y)
Complete fiddle: http://jsfiddle.net/fbd2mk5q/
完整的小提琴：http: //jsfiddle.net/fbd2mk5q/
回答by Yeronimo
Try the new fiddle based on your comment:
根据您的评论尝试新小提琴：
$("#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)
});
});
回答by Kaushik
http://www.hklabs.org/articles/image_zooming_with_javascript
http://www.hklabs.org/articles/image_zooming_with_javascript
Here is the excellent tutorial that i have made on the same topic ! Use a seperate division with background as some part of your image. other part of the image can be hidden with background-repeat:no-repeat; now use the background-position property to move your image inside the division !
这是我针对同一主题制作的出色教程！使用带有背景的单独分区作为图像的某些部分。图像的其他部分可以用 background-repeat:no-repeat 隐藏；现在使用 background-position 属性在分区内移动您的图像！
