diff --git a/package-lock.json b/package-lock.json
index 93a74f8b..1bd6eb3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1068,7 +1068,7 @@
     },
     "@types/cordova": {
       "version": "0.0.34",
-      "resolved": "http://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+      "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
       "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
     },
     "@types/estree": {
@@ -10189,7 +10189,7 @@
     },
     "regjsgen": {
       "version": "0.2.0",
-      "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
       "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
       "dev": true
     },
@@ -10204,7 +10204,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         }
diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.ts b/projects/core/src/lib/image-viewer/image-viewer.component.ts
index a6801e46..da804a42 100644
--- a/projects/core/src/lib/image-viewer/image-viewer.component.ts
+++ b/projects/core/src/lib/image-viewer/image-viewer.component.ts
@@ -300,7 +300,7 @@ export class ImageViewerComponent implements OnInit {
       .pipe(
         tap((event: any) => this.pinchCenter = event.center),
         flatMap(() => pinchPanMove
-      ));
+        ));
 
     this.pinchPan = pinchPan$
       .subscribe((res: any) => {
@@ -330,14 +330,42 @@ export class ImageViewerComponent implements OnInit {
     }
     const moveV = event.center.y - this.pinchCenter.y;
     const moveH = event.center.x - this.pinchCenter.x;
-    const newTop = this.top + moveV;
-    const newLeft = this.left + moveH;
-    console.log(`
-    lastTop: ${this.top}, lastLeft: ${this.left}, moveV: ${moveV}, moveH: ${moveH}, newTop: ${newTop}, newLeft: ${newLeft}
-    `);
     this.pinchCenter = event.center;
-    this.setTop(newTop);
-    this.setLeft(newLeft);
+    const newX = this.restrictRawPosX(this.left + moveH);
+    const newY = this.restrictRawPosY(this.top + moveV);
+
+    this.setTop(newY);
+    this.setLeft(newX);
+  }
+
+  restrictRawPosX(pos) {
+    const viewportDim = this.platform.width();
+    const imageWidth = this.getCurrentImageWidth() / this.scale;
+    const borderPos = (this.getCurrentImageWidth() - Math.min(viewportDim, imageWidth)) / 2;
+    if (pos < borderPos * -1) {
+      return borderPos * -1;
+    } else if (pos > borderPos) {
+      return borderPos;
+    }
+    return pos;
+  }
+
+  restrictRawPosY(pos) {
+    const viewportDim = this.platform.height();
+    const imageHeight = this.getCurrentImageHeight() / this.scale;
+    const offset = this.platform.height() / 2;
+    let borderPos = pos;
+    if (this.getCurrentImageHeight() > this.platform.height()) {
+      borderPos = (this.getCurrentImageHeight() - Math.max(viewportDim, imageHeight)) / 2;
+    } else {
+      borderPos = (this.getCurrentImageHeight() - Math.min(viewportDim, imageHeight)) / 2;
+    }
+    if (pos < borderPos * -1 + offset) {
+      return borderPos * -1 + offset;
+    } else if (pos > borderPos + offset) {
+      return borderPos + offset;
+    }
+    return pos;
   }
 
   setBottom(bottom: number) {