Prevent broken crop when minResolution is unreachable

src/crop.js

@@ -342,8 +342,21 @@ export default class Crop {
     if (this.minResolution) {
       const minZoomPixelWidth = Math.sqrt(this.minResolution * this.viewRatio)
       const minZoomPixelHeight = Math.sqrt(this.minResolution / this.viewRatio)
-      this.maxImageWidth = (this.viewWidth / minZoomPixelWidth) * this.imageWidth
-      this.maxImageHeight = (this.viewHeight / minZoomPixelHeight) * this.imageHeight
+      const maxImageWidth = (this.viewWidth / minZoomPixelWidth) * this.imageWidth
+      const maxImageHeight = (this.viewHeight / minZoomPixelHeight) * this.imageHeight
+
+      // Depending on the image size and configured ratio, the required
+      // resolution cannot always be reached.
+      if (maxImageWidth >= this.viewWidth && maxImageHeight >= this.viewHeight) {
+        this.maxImageWidth = maxImageWidth
+        this.maxImageHeight = maxImageHeight
+      } else {
+        // minResolution is unreachable at this ratio. Lock the zoom at the
+        // most zoomed-out state, where the crop covers the largest possible
+        // image area.
+        this.maxImageWidth = Math.max(this.viewWidth, this.viewHeight * this.imageRatio)
+        this.maxImageHeight = this.maxImageWidth / this.imageRatio
+      }
     }
 
     this.fireChange()

test/specs/srcissors_spec.js

@@ -362,4 +362,34 @@ describe('srcissors', function () {
       })
     })
   })
+
+  describe('with a minResolution that cannot be met at the crop ratio', function () {
+    beforeEach(function (done) {
+      this.arena = $(template)
+      this.arena.css({width: 400, height: 300})
+      $(document.body).append(this.arena)
+
+      this.crop = srcissors.new({
+        arena: this.arena,
+        url: '/test/images/diagonal.jpg',
+        minResolution: 90000
+      })
+      this.crop.on('ready', done)
+    })
+
+    afterEach(function () {
+      this.arena.remove()
+    })
+
+    it('locks the crop at the largest possible area instead of rendering a broken crop', function () {
+      this.crop.setCrop({x: 100, y: 50, width: 150, height: 200})
+
+      expect(this.crop.getCrop()).to.deep.equal({
+        x: 150,
+        y: 0,
+        width: 225,
+        height: 300
+      })
+    })
+  })
 })