add containImage prop and update docs

bliblidotcom · Oct 22, 2020 · 9c1d253 · 9c1d253
1 parent e528a37
commit 9c1d253
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ webpack config:
 | zoom-window-size | Number                                          | 2 | Zoom window size multiplier, relative with thumbnail size |
 | zoom-window-x | Number                                        | 300 | Location absolute on x-axis for zoom window |
 | zoom-window-y | Number                                        | 300 | Location absolute on y-axis for zoom window |
+| containImage | Boolean | false | option to contain the image, this uses `background-size: contain;`, instead of the default `background-size: cover;`
 
 ## Preview
 

diff --git a/src/libs/vue-h-zoom.js b/src/libs/vue-h-zoom.js
@@ -32,6 +32,10 @@ export default {
     zoomWindowY: {
       type: Number,
       default: 10
+    },
+    containImage: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -79,11 +83,14 @@ export default {
     thumbnailStyle: function () {
       return {
         'background-image': `url(${this.image})`,
-        'background-size': 'contain',
-        'background-repeat': 'no-repeat',
-        'background-position': '50% 50%',
+        'background-size': 'cover',
         height: this.toPx(this.height),
-        width: this.toPx(this.width)
+        width: this.toPx(this.width),
+        ...(this.containImage && {
+          'background-size': 'contain',
+          'background-repeat': 'no-repeat',
+          'background-position': '50% 50%',
+        })
       }
     },
     containerStyle: function () {
@@ -115,16 +122,21 @@ export default {
       return {
         'background-image': `url(${this.largeImage})`,
         'background-repeat': 'no-repeat',
-        'background-position': '50% 50%',
-        'background-size': 'contain',
-        'background-color': '#fff',
+        'background-position': this.toPx(this.zoomPosX) + ' ' + this.toPx(this.zoomPosY),
+        'background-size': 'cover',
         width: '100%',
         height: '100%',
         '-webkit-transform': `scale(${this.zoomLevel})`,
-        transform: `
-          scale(${this.zoomLevel})
-          translate(${this.toPx(this.zoomPosX)}, ${this.toPx(this.zoomPosY)})
-        `
+        transform: `scale(${this.zoomLevel})`,
+        ...(this.containImage && {
+          'background-position': '50% 50%',
+          'background-size': 'contain',
+          'background-color': '#fff',
+          transform: `
+            scale(${this.zoomLevel})
+            translate(${this.toPx(this.zoomPosX)}, ${this.toPx(this.zoomPosY)})
+          `
+        })
       }
     },
     pointerWidth: function () {