Add prop zoomAlignmentY to control zoomed image vertical alignment relative to the viewport

README.md

@@ -121,6 +121,10 @@ export interface UncontrolledProps {
   // be from the window's boundaries.
   // Default: 0
   zoomMargin?: number
+
+  // Align the zoomed image vertically to the top or center of the viewport.
+  // Default: 'center'
+  zoomAlignmentY?: 'top' | 'center' | 'bottom'
 }
 ```
 

source/Controlled.tsx

@@ -72,6 +72,7 @@ export interface ControlledProps {
     onUnzoom: () => void
   }) => React.ReactElement
   zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>
+  zoomAlignmentY?: 'top' | 'center' | 'bottom'
   zoomMargin?: number
 }
 
@@ -87,6 +88,7 @@ interface ControlledDefaultProps {
   IconZoom: React.ElementType
   swipeToUnzoomThreshold: number
   wrapElement: 'div' | 'span'
+  zoomAlignmentY: 'top' | 'center' | 'bottom'
   zoomMargin: number
 }
 
@@ -110,6 +112,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
     IconZoom: IEnlarge,
     swipeToUnzoomThreshold: 10,
     wrapElement: 'div',
+    zoomAlignmentY: 'center',
     zoomMargin: 0,
   }
 
@@ -160,6 +163,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
         wrapElement: WrapElement,
         ZoomContent,
         zoomImg,
+        zoomAlignmentY,
         zoomMargin,
       },
       refContent,
@@ -227,6 +231,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
         offset: zoomMargin,
         shouldRefresh,
         targetEl: imgEl as SupportedImage,
+        zoomAlignmentY,
       })
       : {}
 

source/utils.ts

@@ -438,6 +438,7 @@ export interface GetStyleModalImg {
     offset: number,
     shouldRefresh: boolean,
     targetEl: SupportedImage,
+    zoomAlignmentY: 'top' | 'center' | 'bottom'
   }): React.CSSProperties
 }
 
@@ -450,6 +451,7 @@ export const getStyleModalImg: GetStyleModalImg = ({
   offset,
   shouldRefresh,
   targetEl,
+  zoomAlignmentY,
 }) => {
   const hasScalableSrc =
     isSvg ||
@@ -519,7 +521,20 @@ export const getStyleModalImg: GetStyleModalImg = ({
     const childCenterY = parseFloat(String(style.top || 0)) + (parseFloat(String(style.height || 0)) / 2)
 
     const translateX = viewportX - childCenterX
-    const translateY = viewportY - childCenterY
+    let translateY
+
+    switch (zoomAlignmentY) {
+      case 'top':
+        translateY = -style.top;
+        break
+      case 'bottom':
+        translateY = window.innerHeight - style.height - style.top;
+        break
+      case 'center':
+      default:
+        translateY = viewportY - childCenterY
+        break
+    }
 
     // For scenarios like resizing the browser window
     if (shouldRefresh) {