feat(*): Added scale prop for zoomed image

README.md

@@ -64,6 +64,7 @@ srcSet | String | | Default srcset attribute for a responsive original image.
 sizes | String | | Default sizes attribute for use with srcset.
 sources | Array | | A list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
 zoomSrc | String | | URL for the larger zoom image. Falls back to original image src if not defined.
+zoomScale | Number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
 alt | String | | Alternative text for the original image.
 moveType | String | pan | `pan` or `drag`. The user behavior for moving zoomed images on non-touch devices.
 zoomType | String | click | `click` or `hover`. The zoom behavior for images.

src/InnerImageZoom/InnerImageZoom.js

@@ -15,7 +15,6 @@ class InnerImageZoom extends Component {
       isFullscreen: false,
       isDragging: false,
       currentMoveType: props.moveType,
-      currentZoomType: props.zoomType,
       left: 0,
       top: 0
     };
@@ -28,7 +27,7 @@ class InnerImageZoom extends Component {
       isActive: true
     });
 
-    if (this.state.currentZoomType === 'hover' && !this.state.isZoomed) {
+    if (this.props.zoomType === 'hover' && !this.state.isZoomed) {
       this.handleClick(e);
     }
   }
@@ -68,6 +67,8 @@ class InnerImageZoom extends Component {
   handleLoad = (e) => {
     this.isLoaded = true;
     this.zoomImg = e.target;
+    this.zoomImg.setAttribute('width', this.zoomImg.offsetWidth * this.props.zoomScale);
+    this.zoomImg.setAttribute('height', this.zoomImg.offsetHeight * this.props.zoomScale);
     this.bounds = this.getBounds(this.img, false);
     this.ratios = this.getRatios(this.bounds, this.zoomImg);
 
@@ -312,6 +313,7 @@ InnerImageZoom.propTypes = {
   sizes: PropTypes.string,
   sources: PropTypes.array,
   zoomSrc: PropTypes.string,
+  zoomScale: PropTypes.number,
   alt: PropTypes.string,
   fadeDuration: PropTypes.number,
   fullscreenOnMobile: PropTypes.bool,
@@ -325,7 +327,8 @@ InnerImageZoom.defaultProps = {
   moveType: 'pan',
   zoomType: 'click',
   fadeDuration: 150,
-  mobileBreakpoint: 640
+  mobileBreakpoint: 640,
+  zoomScale: 1
 };
 
 export default InnerImageZoom;