Javascript 缩小图像使查看中心位于中心

我被指派制作一个图像放大和缩小javascript应用程序， 但对于可拖动的图像，在放大和缩小时，我必须将容器的查看中心保持在中心。 我已经完成了放大部分的所有计算，并保持左上角的比例。 用这个

---

请任何人都可以使用它来引导/制作缩小功能

您可以从放大功能开始，然后从缩小图像的高度和宽度开始。因此，现在将从高度和宽度中减去，而不是增加高度和宽度

css.height = image.height() - (image.height() * 0.2);
css.width = image.width() - (image.width() * 0.2);

一旦你这样做，缩小功能将开始工作，但很快你就会意识到，一旦你得到一个小于原始大小，图像将开始发展一个左上边距。为了防止出现这种情况，您需要检查

左

和

顶

值是否在缩小过程中变为正值。如果是，您可以将其设置为

0

，以便图像仍将移动到左上角

css.left = css.left > 0 ? 0 : css.left;
css.top = css.top > 0 ? 0 : css.top;

随着你的继续，你会注意到更多这样的问题，你将不得不处理更多的情况，以防止利润增长

这是一把小提琴：

更新1 在放大时，基于容器的中心，图像的某些部分可能会超出容器，并且可能会在容器的右下部分形成一些边距。您可以在放大功能中添加这些验证，以确保在放大时，图像尽可能留在容器中

if(css.height + css.top < 200){
  css.top = 200 - css.height;
}

if(css.width + css.left < 300) {
  css.left = 300 - css.width; 
}

if（css.height+css.top<200）{
css.top=200-css.height；
}
如果（css.width+css.left<300）{
css.left=300-css.width；
}

---

下面是用此代码更新的小提琴：

您想让我们编写

缩小

功能吗？@NisargShah，如果可以，谢谢您，或者你可以指导我怎么做，看，但缩小时它不会保持左上比例，当变为正时它只会保持所有0。编辑-我现在看到更新，正在放大校正，但我仍然坚持缩小是的，我注意到了。这是一个偏好的问题。我倾向于在容器中始终保留图像的某些部分。但是我如何才能使其像缩放一样，将中心保持在中心呢？在这一点上，我删除了答案中代码的第二部分和第三部分，而图像通常保持在中心。但当它变小后，它开始向右下移动。让我看看能不能找到原因。

if(css.height + css.top < 200){
  css.top = 200 - css.height;
}

if(css.width + css.left < 300) {
  css.left = 300 - css.width; 
}