diff --git a/README.md b/README.md
index b4403e2..a3b8bf3 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # React Image Crop
 
-A responsive image cropping tool for React.
+An image cropping tool for React with no dependencies.
 
 [![React Image Crop on NPM](https://img.shields.io/npm/v/react-image-crop.svg)](https://www.npmjs.com/package/react-image-crop)
 
@@ -17,17 +17,15 @@ A responsive image cropping tool for React.
 6. [FAQ](#faq)
     1. [What about showing the crop on the client?](#what-about-showing-the-crop-on-the-client)
     2. [How to handle image EXIF orientation/rotation](#how-to-handle-image-exif-orientationrotation)
-    3. [How to create a fixed aspect crop programmatically](#how-to-create-a-fixed-aspect-crop-programmatically)
 7. [Contributing / Developing](#contributing--developing)
 
 ## Features
 
-- Responsive
 - Touch enabled
 - Free-form or fixed aspect crops
 - Keyboard support for nudging selection
 - Min/max crop size
-- No dependencies/small footprint (~4.5KB gzip)
+- No dependencies/small footprint (5KB gzip)
 
 ## Installation
 ```
@@ -36,11 +34,9 @@ npm i react-image-crop --save
 
 ## Usage
 
-Include the main js module, e.g.:
+Include the main js module:
 
 ```js
-var ReactCrop = require('react-image-crop');
-// or es6:
 import ReactCrop from 'react-image-crop';
 ```
 
@@ -75,9 +71,9 @@ Note when importing the script globally using a `<script>` tag access the compon
 
 You can of course pass a blob url (using `URL.createObjectURL()` and `URL.revokeObjectURL()`) or base64 data.
 
-#### onChange(crop, pixelCrop) (required)
+#### onChange(crop) (required)
 
-A callback which happens for every change of the crop (i.e. many times as you are dragging/resizing). Passes the current crop state object, as well as a pixel-converted crop for your convenience.
+A callback which happens for every change of the crop (i.e. many times as you are dragging/resizing). Passes the current crop state object.
 
 Note you _must_ implement this callback and update your crop state, otherwise nothing will change!
 
@@ -89,16 +85,16 @@ onChange = (crop) => {
 
 #### crop (required*)
 
-All crop values are in percentages, and are relative to the image. All crop params are optional.
+All crop values are in pixels. All crop params are optional.
 
 &#42; _While you can initially omit the crop object, any subsequent change will need to be saved to state in the `onChange` callback and passed here._
 
 ```js
 crop: {
-  x: 20,
-  y: 10,
-  width: 30,
-  height: 10
+  x: 130,
+  y: 50,
+  width: 200,
+  height: 200
 }
 
 <ReactCrop src="path/to/image.jpg" crop={this.state.crop} />
@@ -112,7 +108,7 @@ crop: {
 }
 ```
 
-Or specify one of the dimensions:
+Or specify one or both of the dimensions:
 
 ```js
 crop: {
@@ -121,23 +117,23 @@ crop: {
 }
 ```
 
-In this case the other dimension will be calculated and `onChange` and `onComplete` will be fired with the completed crop, so that the crop will be rendered on the next pass. This will be done for you when an image is loaded, but if you want to set an aspect crop from say a button, then you will need to set a complete crop, see [How to create a fixed aspect crop programmatically](README.md#how-to-create-a-fixed-aspect-crop-programmatically) for more details on that.
+If you specify just one of the dimensions, the other will be calculated for you.
 
 #### minWidth (optional)
 
-A minimum crop width, as a percentage of the image width.
+A minimum crop width, in pixels.
 
 #### minHeight (optional)
 
-A minimum crop height, as a percentage of the image height.
+A minimum crop height, in pixels.
 
 #### maxWidth (optional)
 
-A maximum crop width, as a percentage of the image width.
+A maximum crop width, in pixels.
 
 #### maxHeight (optional)
 
-A maximum crop height, as a percentage of the image height.
+A maximum crop height, in pixels.
 
 #### keepSelection (optional)
 
@@ -163,17 +159,13 @@ Inline styles object to be passed to the image wrapper element.
 
 Inline styles object to be passed to the image element.
 
-#### useNaturalImageDimensions (optional)
+#### onComplete(crop) (optional)
 
-If true then the pixel crop is calculated using natural dimensions instead of the rendered dimensions (defaults to true).
+A callback which happens after a resize, drag, or nudge. Passes the current crop state object.
 
-#### onComplete(crop, pixelCrop) (optional)
+#### onImageLoaded(image) (optional)
 
-A callback which happens after a resize, drag, or nudge. Passes the current crop state object, as well as a pixel-converted crop for your convenience.
-
-#### onImageLoaded(image, pixelCrop) (optional)
-
-A callback which happens when the image is loaded. Passes the image DOM element and the pixelCrop if a crop has been specified by this point.
+A callback which happens when the image is loaded. Passes the image DOM element.
 
 #### onImageError(event) (optional)
 
@@ -206,26 +198,27 @@ However here's a ready to use function that returns a file blob for the cropped
 ```js
 /**
  * @param {File} image - Image File Object
- * @param {Object} pixelCrop - pixelCrop Object from the 2nd argument of onChange or onComplete
+ * @param {Object} crop - crop Object
  * @param {String} fileName - Name of the returned file in Promise
  */
-function getCroppedImg(image, pixelCrop, fileName) {
-
+function getCroppedImg(image, crop, fileName) {
   const canvas = document.createElement('canvas');
-  canvas.width = pixelCrop.width;
-  canvas.height = pixelCrop.height;
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  canvas.width = crop.width;
+  canvas.height = crop.height;
   const ctx = canvas.getContext('2d');
 
   ctx.drawImage(
     image,
-    pixelCrop.x,
-    pixelCrop.y,
-    pixelCrop.width,
-    pixelCrop.height,
+    crop.x * scaleX,
+    crop.y * scaleY,
+    crop.width * scaleX,
+    crop.height * scaleY,
     0,
     0,
-    pixelCrop.width,
-    pixelCrop.height
+    crop.width,
+    crop.height,
   );
 
   // As Base64 string
@@ -241,7 +234,7 @@ function getCroppedImg(image, pixelCrop, fileName) {
 }
 
 async test() {
-  const croppedImg = await getCroppedImg(image, pixelCrop, returnedFileName);
+  const croppedImg = await getCroppedImg(image, crop, fileName);
 }
 ```
 
@@ -259,18 +252,6 @@ You might find that some images are rotated incorrectly. Unfortunately this is a
 
 You can use the following library to load images, which will correct the rotation for you: https://github.com/blueimp/JavaScript-Load-Image/
 
-### How to create a fixed aspect crop programmatically
-
-As this library uses percentages for crop values, creating an aspect crop yourself requires you to use the dimensions of the image. You might do this for instance if you have some buttons with pre-defined aspect crops.
-
-The library exports a convenience function for this - `makeAspectCrop(partialCrop, imageAspect)`. You can calculate the image aspect using `image` which is passed in the `onImageLoaded(image, crop)` event. Note that you don't need to do this when a new image loads, in that case the library will fix (or complete if you omited width or height) the crop for you.
-
-When using `makeAspectCrop` specify the aspect, optionally the x and y, and the width or height as a percentage. The other side will be filled in for you.
-
-```js
-const newCrop = makeAspectCrop({ aspect: 16/9, width: 50 }, image.naturalWidth / image.naturalHeight)
-```
-
 ## Contributing / Developing
 
 To develop run `npm start`, this will recompile your JS and SCSS on changes.
diff --git a/demo/demo.js b/demo/demo.js
index 5c2881c..78dfc38 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -15,7 +15,7 @@ class App extends PureComponent {
     crop: {
       x: 10,
       y: 10,
-      aspect: 1,
+      // aspect: 1,
       width: 50,
     },
   }
@@ -30,14 +30,14 @@ class App extends PureComponent {
     }
   }
 
-  onImageLoaded = (image, pixelCrop) => {
+  onImageLoaded = (image) => {
     this.imageRef = image;
-    this.makeClientCrop(this.state.crop, pixelCrop);
+    this.makeClientCrop(this.state.crop);
   }
 
-  onCropComplete = (crop, pixelCrop) => {
-    console.log('onCropComplete', { crop, pixelCrop });
-    this.makeClientCrop(crop, pixelCrop);
+  onCropComplete = (crop) => {
+    console.log('onCropComplete', crop);
+    this.makeClientCrop(crop);
   }
 
   onCropChange = (crop) => {
@@ -53,23 +53,24 @@ class App extends PureComponent {
     console.log('onDragEnd');
   }
 
-  getCroppedImg(image, pixelCrop, fileName) {
-    console.log('getCroppedImg', { image, pixelCrop, fileName });
+  getCroppedImg(image, crop, fileName) {
     const canvas = document.createElement('canvas');
-    canvas.width = pixelCrop.width;
-    canvas.height = pixelCrop.height;
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+    canvas.width = crop.width;
+    canvas.height = crop.height;
     const ctx = canvas.getContext('2d');
 
     ctx.drawImage(
       image,
-      pixelCrop.x,
-      pixelCrop.y,
-      pixelCrop.width,
-      pixelCrop.height,
+      crop.x * scaleX,
+      crop.y * scaleY,
+      crop.width * scaleX,
+      crop.height * scaleY,
       0,
       0,
-      pixelCrop.width,
-      pixelCrop.height,
+      crop.width,
+      crop.height,
     );
 
     return new Promise((resolve) => {
@@ -82,11 +83,11 @@ class App extends PureComponent {
     });
   }
 
-  makeClientCrop(crop, pixelCrop) {
+  makeClientCrop(crop) {
     if (this.imageRef && crop.width && crop.height) {
       this.getCroppedImg(
         this.imageRef,
-        pixelCrop,
+        crop,
         'newFile.jpeg',
       ).then(croppedImageUrl => this.setState({ croppedImageUrl }));
     }
@@ -100,7 +101,7 @@ class App extends PureComponent {
         bottom: -25,
         right: 0,
       }}
-      onClick={() => window.alert('You click addon!')}
+      onClick={() => window.alert('You clicked the addon!')}
     >
       custom addon
     </button>
diff --git a/dist/ReactCrop.js b/dist/ReactCrop.js
index c5116e5..c93cfa7 100644
--- a/dist/ReactCrop.js
+++ b/dist/ReactCrop.js
@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("prop-types"));
+		module.exports = factory(require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react", "prop-types"], factory);
+		define(["react"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactCrop"] = factory(require("react"), require("prop-types"));
+		exports["ReactCrop"] = factory(require("react"));
 	else
-		root["ReactCrop"] = factory(root["React"], root["PropTypes"]);
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {
+		root["ReactCrop"] = factory(root["React"]);
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,11 +70,220 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
+/***/ (function(module, exports) {
+
+// shim for using process in browser
+var process = module.exports = {};
+
+// cached from whatever global is present so that test runners that stub it
+// don't break things.  But we need to wrap it in a try catch in case it is
+// wrapped in strict mode code which doesn't define any globals.  It's inside a
+// function because try/catches deoptimize in certain engines.
+
+var cachedSetTimeout;
+var cachedClearTimeout;
+
+function defaultSetTimout() {
+    throw new Error('setTimeout has not been defined');
+}
+function defaultClearTimeout () {
+    throw new Error('clearTimeout has not been defined');
+}
+(function () {
+    try {
+        if (typeof setTimeout === 'function') {
+            cachedSetTimeout = setTimeout;
+        } else {
+            cachedSetTimeout = defaultSetTimout;
+        }
+    } catch (e) {
+        cachedSetTimeout = defaultSetTimout;
+    }
+    try {
+        if (typeof clearTimeout === 'function') {
+            cachedClearTimeout = clearTimeout;
+        } else {
+            cachedClearTimeout = defaultClearTimeout;
+        }
+    } catch (e) {
+        cachedClearTimeout = defaultClearTimeout;
+    }
+} ())
+function runTimeout(fun) {
+    if (cachedSetTimeout === setTimeout) {
+        //normal enviroments in sane situations
+        return setTimeout(fun, 0);
+    }
+    // if setTimeout wasn't available but was latter defined
+    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
+        cachedSetTimeout = setTimeout;
+        return setTimeout(fun, 0);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedSetTimeout(fun, 0);
+    } catch(e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
+            return cachedSetTimeout.call(null, fun, 0);
+        } catch(e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
+            return cachedSetTimeout.call(this, fun, 0);
+        }
+    }
+
+
+}
+function runClearTimeout(marker) {
+    if (cachedClearTimeout === clearTimeout) {
+        //normal enviroments in sane situations
+        return clearTimeout(marker);
+    }
+    // if clearTimeout wasn't available but was latter defined
+    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
+        cachedClearTimeout = clearTimeout;
+        return clearTimeout(marker);
+    }
+    try {
+        // when when somebody has screwed with setTimeout but no I.E. maddness
+        return cachedClearTimeout(marker);
+    } catch (e){
+        try {
+            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
+            return cachedClearTimeout.call(null, marker);
+        } catch (e){
+            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
+            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
+            return cachedClearTimeout.call(this, marker);
+        }
+    }
+
+
+
+}
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+
+function cleanUpNextTick() {
+    if (!draining || !currentQueue) {
+        return;
+    }
+    draining = false;
+    if (currentQueue.length) {
+        queue = currentQueue.concat(queue);
+    } else {
+        queueIndex = -1;
+    }
+    if (queue.length) {
+        drainQueue();
+    }
+}
+
+function drainQueue() {
+    if (draining) {
+        return;
+    }
+    var timeout = runTimeout(cleanUpNextTick);
+    draining = true;
+
+    var len = queue.length;
+    while(len) {
+        currentQueue = queue;
+        queue = [];
+        while (++queueIndex < len) {
+            if (currentQueue) {
+                currentQueue[queueIndex].run();
+            }
+        }
+        queueIndex = -1;
+        len = queue.length;
+    }
+    currentQueue = null;
+    draining = false;
+    runClearTimeout(timeout);
+}
+
+process.nextTick = function (fun) {
+    var args = new Array(arguments.length - 1);
+    if (arguments.length > 1) {
+        for (var i = 1; i < arguments.length; i++) {
+            args[i - 1] = arguments[i];
+        }
+    }
+    queue.push(new Item(fun, args));
+    if (queue.length === 1 && !draining) {
+        runTimeout(drainQueue);
+    }
+};
+
+// v8 likes predictible objects
+function Item(fun, array) {
+    this.fun = fun;
+    this.array = array;
+}
+Item.prototype.run = function () {
+    this.fun.apply(null, this.array);
+};
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
+
+function noop() {}
+
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+process.prependListener = noop;
+process.prependOnceListener = noop;
+
+process.listeners = function (name) { return [] }
+
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
+
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
+};
+process.umask = function() { return 0; };
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+module.exports = ReactPropTypesSecret;
+
+
+/***/ }),
+/* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -83,7 +292,7 @@ return /******/ (function(modules) { // webpackBootstrap
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.containCrop = exports.makeAspectCrop = exports.getPixelCrop = exports.Component = exports.default = undefined;
+exports.containCrop = exports.makeAspectCrop = exports.Component = exports.default = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -92,11 +301,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* globals document, window */
 
 
-var _react = __webpack_require__(1);
+var _react = __webpack_require__(3);
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = __webpack_require__(2);
+var _propTypes = __webpack_require__(4);
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -161,9 +370,9 @@ function inverseOrd(ord) {
   return inversedOrd;
 }
 
-function makeAspectCrop(crop, imageAspect) {
-  if (isNaN(crop.aspect) || isNaN(imageAspect)) {
-    console.warn('`crop.aspect` and `imageAspect` need to be numbers in order to make an aspect crop', crop);
+function makeAspectCrop(crop, image) {
+  if (isNaN(crop.aspect)) {
+    console.warn('`crop.aspect` should be a number in order to make an aspect crop', crop);
     return crop;
   }
 
@@ -173,83 +382,55 @@ function makeAspectCrop(crop, imageAspect) {
   }, crop);
 
   if (crop.width) {
-    completeCrop.height = crop.width / crop.aspect * imageAspect;
+    completeCrop.height = crop.width / crop.aspect;
   }
   if (crop.height) {
-    completeCrop.width = (completeCrop.height || crop.height) * (crop.aspect / imageAspect);
+    completeCrop.width = (completeCrop.height || crop.height) * crop.aspect;
   }
 
-  if (crop.y + (completeCrop.height || crop.height) > 100) {
-    completeCrop.height = 100 - crop.y;
-    completeCrop.width = completeCrop.height * crop.aspect / imageAspect;
+  if (crop.y + (completeCrop.height || crop.height) > image.height) {
+    completeCrop.height = image.height - crop.y;
+    completeCrop.width = completeCrop.height * crop.aspect;
   }
 
-  if (crop.x + (completeCrop.width || crop.width) > 100) {
-    completeCrop.width = 100 - crop.x;
-    completeCrop.height = completeCrop.width / crop.aspect * imageAspect;
+  if (crop.x + (completeCrop.width || crop.width) > image.width) {
+    completeCrop.width = image.width - crop.x;
+    completeCrop.height = completeCrop.width / crop.aspect;
   }
 
   return completeCrop;
 }
 
-function isAspectInvalid(crop, width, height) {
+function isAspectInvalid(crop, image) {
   if (!crop.width && crop.height || crop.width && !crop.height) {
     return true;
   }
 
-  if (crop.width && crop.height && Math.round(height * (crop.height / 100) * crop.aspect) !== Math.round(width * (crop.width / 100))) {
-    return true;
-  }
-
-  return false;
+  return crop.width / crop.aspect !== crop.height || crop.height * crop.aspect !== crop.width || crop.y + crop.height > image.height || crop.x + crop.width > image.width;
 }
 
 function resolveCrop(crop, image) {
-  if (crop && crop.aspect && isAspectInvalid(crop, image.naturalWidth, image.naturalHeight)) {
-    return makeAspectCrop(crop, image.naturalWidth / image.naturalHeight);
+  if (crop && crop.aspect && isAspectInvalid(crop, image)) {
+    return makeAspectCrop(crop, image);
   }
 
   return crop;
 }
 
-function getPixelCrop(image, percentCrop) {
-  var useNaturalImageDimensions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
-  if (!image || !percentCrop) {
-    return null;
-  }
-
-  var imageWidth = useNaturalImageDimensions ? image.naturalWidth : image.width;
-  var imageHeight = useNaturalImageDimensions ? image.naturalHeight : image.height;
-
-  var x = Math.round(imageWidth * (percentCrop.x / 100));
-  var y = Math.round(imageHeight * (percentCrop.y / 100));
-  var width = Math.round(imageWidth * (percentCrop.width / 100));
-  var height = Math.round(imageHeight * (percentCrop.height / 100));
-
-  return {
-    x: x,
-    y: y,
-    // Clamp width and height so rounding doesn't cause the crop to exceed bounds.
-    width: clamp(width, 0, imageWidth - x),
-    height: clamp(height, 0, imageHeight - y)
-  };
-}
-
-function containCrop(prevCrop, crop, imageAspect) {
+function containCrop(prevCrop, crop, image) {
   var contained = _extends({}, crop);
 
   // Fixes issue where crop can be dragged to the left when resizing with SW ord
   // even though it's hit the bottom of the image.
-  if (crop.aspect && prevCrop.x > crop.x && crop.height + crop.y >= 100) {
+  if (crop.aspect && prevCrop.x > crop.x && crop.height + crop.y >= image.height) {
     contained.x = prevCrop.x;
   }
 
   // Don't let the crop grow on the opposite side when hitting an x image boundary.
   var cropXAdjusted = false;
-  if (contained.x + contained.width > 100) {
-    contained.width = crop.width + (100 - (crop.x + crop.width));
-    contained.x = crop.x + (100 - (crop.x + contained.width));
+  if (contained.x + contained.width > image.width) {
+    contained.width = crop.width + (image.width - (crop.x + crop.width));
+    contained.x = crop.x + (image.width - (crop.x + contained.width));
     cropXAdjusted = true;
   } else if (contained.x < 0) {
     contained.width = crop.x + crop.width;
@@ -259,7 +440,7 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   if (cropXAdjusted && crop.aspect) {
     // Adjust height to the resized width to maintain aspect.
-    contained.height = contained.width / crop.aspect * imageAspect;
+    contained.height = contained.width / crop.aspect;
     // If sizing in up direction we need to pin Y at the point it
     // would be at the boundary.
     if (prevCrop.y > contained.y) {
@@ -269,9 +450,9 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   // Don't let the crop grow on the opposite side when hitting a y image boundary.
   var cropYAdjusted = false;
-  if (contained.y + contained.height > 100) {
-    contained.height = crop.height + (100 - (crop.y + crop.height));
-    contained.y = crop.y + (100 - (crop.y + contained.height));
+  if (contained.y + contained.height > image.height) {
+    contained.height = crop.height + (image.height - (crop.y + crop.height));
+    contained.y = crop.y + (image.height - (crop.y + contained.height));
     cropYAdjusted = true;
   } else if (contained.y < 0) {
     contained.height = crop.y + crop.height;
@@ -281,7 +462,7 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   if (cropYAdjusted && crop.aspect) {
     // Adjust width to the resized height to maintain aspect.
-    contained.width = contained.height * crop.aspect / imageAspect;
+    contained.width = contained.height * crop.aspect;
     // If sizing in up direction we need to pin X at the point it
     // would be at the boundary.
     if (contained.x < crop.x) {
@@ -360,8 +541,7 @@ var ReactCrop = function (_PureComponent) {
           disabled = _this$props2.disabled,
           locked = _this$props2.locked,
           keepSelection = _this$props2.keepSelection,
-          onChange = _this$props2.onChange,
-          useNaturalImageDimensions = _this$props2.useNaturalImageDimensions;
+          onChange = _this$props2.onChange;
 
 
       if (e.target !== _this.imageRef) {
@@ -380,13 +560,13 @@ var ReactCrop = function (_PureComponent) {
       _this.componentRef.focus({ preventScroll: true });
 
       var imageOffset = _this.getElementOffset(_this.imageRef);
-      var xPc = (clientPos.x - imageOffset.left) / _this.imageRef.width * 100;
-      var yPc = (clientPos.y - imageOffset.top) / _this.imageRef.height * 100;
+      var x = clientPos.x - imageOffset.left;
+      var y = clientPos.y - imageOffset.top;
 
       var nextCrop = {
         aspect: crop ? crop.aspect : undefined,
-        x: xPc,
-        y: yPc,
+        x: x,
+        y: y,
         width: 0,
         height: 0
       };
@@ -409,7 +589,7 @@ var ReactCrop = function (_PureComponent) {
       };
 
       _this.mouseDownOnCrop = true;
-      onChange(nextCrop, getPixelCrop(_this.imageRef, nextCrop, useNaturalImageDimensions));
+      onChange(nextCrop);
       _this.setState({ cropIsActive: true });
     }, _this.onDocMouseTouchMove = function (e) {
       var _this$props3 = _this.props,
@@ -428,6 +608,7 @@ var ReactCrop = function (_PureComponent) {
       }
 
       e.preventDefault(); // Stop drag selection.
+
       if (!_this.dragStarted) {
         _this.dragStarted = true;
         onDragStart();
@@ -442,11 +623,8 @@ var ReactCrop = function (_PureComponent) {
         clientPos.y = _this.straightenYPath(clientPos.x);
       }
 
-      var xDiffPx = clientPos.x - evData.clientStartX;
-      evData.xDiffPc = xDiffPx / _this.imageRef.width * 100;
-
-      var yDiffPx = clientPos.y - evData.clientStartY;
-      evData.yDiffPc = yDiffPx / _this.imageRef.height * 100;
+      evData.xDiff = clientPos.x - evData.clientStartX;
+      evData.yDiff = clientPos.y - evData.clientStartY;
 
       var nextCrop = void 0;
 
@@ -457,15 +635,14 @@ var ReactCrop = function (_PureComponent) {
       }
 
       if (nextCrop !== crop) {
-        onChange(nextCrop, getPixelCrop(_this.imageRef, nextCrop));
+        onChange(nextCrop);
       }
     }, _this.onComponentKeyDown = function (e) {
       var _this$props4 = _this.props,
           crop = _this$props4.crop,
           disabled = _this$props4.disabled,
           onChange = _this$props4.onChange,
-          onComplete = _this$props4.onComplete,
-          useNaturalImageDimensions = _this$props4.useNaturalImageDimensions;
+          onComplete = _this$props4.onComplete;
 
 
       if (disabled) {
@@ -497,19 +674,18 @@ var ReactCrop = function (_PureComponent) {
 
       if (nudged) {
         e.preventDefault(); // Stop drag selection.
-        nextCrop.x = clamp(nextCrop.x, 0, 100 - nextCrop.width);
-        nextCrop.y = clamp(nextCrop.y, 0, 100 - nextCrop.height);
+        nextCrop.x = clamp(nextCrop.x, 0, _this.imageRef.width - nextCrop.width);
+        nextCrop.y = clamp(nextCrop.y, 0, _this.imageRef.height - nextCrop.height);
 
-        onChange(nextCrop, getPixelCrop(_this.imageRef, nextCrop, useNaturalImageDimensions));
-        onComplete(nextCrop, getPixelCrop(_this.imageRef, nextCrop, useNaturalImageDimensions));
+        onChange(nextCrop);
+        onComplete(nextCrop);
       }
     }, _this.onDocMouseTouchEnd = function () {
       var _this$props5 = _this.props,
           crop = _this$props5.crop,
           disabled = _this$props5.disabled,
           onComplete = _this$props5.onComplete,
-          onDragEnd = _this$props5.onDragEnd,
-          useNaturalImageDimensions = _this$props5.useNaturalImageDimensions;
+          onDragEnd = _this$props5.onDragEnd;
 
 
       if (disabled) {
@@ -520,7 +696,7 @@ var ReactCrop = function (_PureComponent) {
         _this.mouseDownOnCrop = false;
         _this.dragStarted = false;
         onDragEnd();
-        onComplete(crop, getPixelCrop(_this.imageRef, crop, useNaturalImageDimensions));
+        onComplete(crop);
         _this.setState({ cropIsActive: false });
       }
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -569,19 +745,18 @@ var ReactCrop = function (_PureComponent) {
           crop = _props.crop,
           onComplete = _props.onComplete,
           onChange = _props.onChange,
-          onImageLoaded = _props.onImageLoaded,
-          useNaturalImageDimensions = _props.useNaturalImageDimensions;
+          onImageLoaded = _props.onImageLoaded;
 
 
       var resolvedCrop = resolveCrop(crop, image);
 
       // Return false from onImageLoaded if you set the crop with setState in there as otherwise the subsequent
       // onChange + onComplete will not have your updated crop.
-      var res = onImageLoaded(image, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
+      var res = onImageLoaded(image);
 
       if (res !== false && resolvedCrop !== crop) {
-        onChange(resolvedCrop, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
-        onComplete(resolvedCrop, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
+        onChange(resolvedCrop);
+        onComplete(resolvedCrop);
       }
     }
   }, {
@@ -604,10 +779,9 @@ var ReactCrop = function (_PureComponent) {
       var crop = this.props.crop;
 
       return {
-        top: crop.y + '%',
-        left: crop.x + '%',
-        width: crop.width + '%',
-        height: crop.height + '%'
+        transform: 'translate(' + crop.x + 'px, ' + crop.y + 'px)',
+        width: crop.width + 'px',
+        height: crop.height + 'px'
       };
     }
   }, {
@@ -619,26 +793,26 @@ var ReactCrop = function (_PureComponent) {
           maxWidth = _props2.maxWidth,
           minHeight = _props2.minHeight,
           maxHeight = _props2.maxHeight;
-      var evData = this.evData;
-
-      var imageAspect = this.imageRef.width / this.imageRef.height;
+      var evData = this.evData,
+          imageRef = this.imageRef;
 
       // New width.
-      var newWidth = evData.cropStartWidth + evData.xDiffPc;
+
+      var newWidth = evData.cropStartWidth + evData.xDiff;
 
       if (evData.xCrossOver) {
         newWidth = Math.abs(newWidth);
       }
 
-      newWidth = clamp(newWidth, minWidth, maxWidth);
+      newWidth = clamp(newWidth, minWidth, maxWidth || imageRef.width);
 
       // New height.
       var newHeight = void 0;
 
       if (crop.aspect) {
-        newHeight = newWidth / crop.aspect * imageAspect;
+        newHeight = newWidth / crop.aspect;
       } else {
-        newHeight = evData.cropStartHeight + evData.yDiffPc;
+        newHeight = evData.cropStartHeight + evData.yDiff;
       }
 
       if (evData.yCrossOver) {
@@ -646,10 +820,10 @@ var ReactCrop = function (_PureComponent) {
         newHeight = Math.min(Math.abs(newHeight), evData.cropStartY);
       }
 
-      newHeight = clamp(newHeight, minHeight, maxHeight);
+      newHeight = clamp(newHeight, minHeight, maxHeight || imageRef.height);
 
       if (crop.aspect) {
-        newWidth = clamp(newHeight * crop.aspect / imageAspect, 0, 100);
+        newWidth = clamp(newHeight * crop.aspect, 0, this.imageRef.width);
       }
 
       return {
@@ -663,8 +837,8 @@ var ReactCrop = function (_PureComponent) {
       var nextCrop = this.makeNewCrop();
       var evData = this.evData;
 
-      nextCrop.x = clamp(evData.cropStartX + evData.xDiffPc, 0, 100 - nextCrop.width);
-      nextCrop.y = clamp(evData.cropStartY + evData.yDiffPc, 0, 100 - nextCrop.height);
+      nextCrop.x = clamp(evData.cropStartX + evData.xDiff, 0, this.imageRef.width - nextCrop.width);
+      nextCrop.y = clamp(evData.cropStartY + evData.yDiff, 0, this.imageRef.height - nextCrop.height);
       return nextCrop;
     }
   }, {
@@ -678,15 +852,14 @@ var ReactCrop = function (_PureComponent) {
           minHeight = _props3.minHeight;
       var ord = evData.ord;
 
-      var imageAspect = this.imageRef.width / this.imageRef.height;
-
       // On the inverse change the diff so it's the same and
       // the same algo applies.
+
       if (evData.xInversed) {
-        evData.xDiffPc -= evData.cropStartWidth * 2;
+        evData.xDiff -= evData.cropStartWidth * 2;
       }
       if (evData.yInversed) {
-        evData.yDiffPc -= evData.cropStartHeight * 2;
+        evData.yDiff -= evData.cropStartHeight * 2;
       }
 
       // New size.
@@ -718,7 +891,7 @@ var ReactCrop = function (_PureComponent) {
         width: newSize.width,
         height: newSize.height,
         aspect: nextCrop.aspect
-      }, imageAspect);
+      }, this.imageRef);
 
       // Apply x/y/width/height changes depending on ordinate (fixed aspect always applies both).
       if (nextCrop.aspect || ReactCrop.xyOrds.indexOf(ord) > -1) {
@@ -753,10 +926,10 @@ var ReactCrop = function (_PureComponent) {
     value: function straightenYPath(clientX) {
       var evData = this.evData;
       var ord = evData.ord;
-      var cropOffset = evData.cropOffset;
+      var cropOffset = evData.cropOffset,
+          cropStartWidth = evData.cropStartWidth,
+          cropStartHeight = evData.cropStartHeight;
 
-      var cropStartWidth = evData.cropStartWidth / 100 * this.imageRef.width;
-      var cropStartHeight = evData.cropStartHeight / 100 * this.imageRef.height;
       var k = void 0;
       var d = void 0;
 
@@ -824,11 +997,11 @@ var ReactCrop = function (_PureComponent) {
       var evData = this.evData;
 
 
-      if (!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiffPc >= 0 || evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiffPc <= 0) {
+      if (!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff >= 0 || evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff <= 0) {
         evData.xCrossOver = !evData.xCrossOver;
       }
 
-      if (!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiffPc >= 0 || evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiffPc <= 0) {
+      if (!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff >= 0 || evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff <= 0) {
         evData.yCrossOver = !evData.yCrossOver;
       }
 
@@ -988,8 +1161,8 @@ ReactCrop.defaultProps = {
   disabled: false,
   locked: false,
   imageAlt: '',
-  maxWidth: 100,
-  maxHeight: 100,
+  maxWidth: undefined,
+  maxHeight: undefined,
   minWidth: 0,
   minHeight: 0,
   keepSelection: false,
@@ -1001,27 +1174,879 @@ ReactCrop.defaultProps = {
   children: undefined,
   style: undefined,
   imageStyle: undefined,
-  renderSelectionAddon: undefined,
-  useNaturalImageDimensions: true
+  renderSelectionAddon: undefined
 };
 
 exports.default = ReactCrop;
 exports.Component = ReactCrop;
-exports.getPixelCrop = getPixelCrop;
 exports.makeAspectCrop = makeAspectCrop;
 exports.containCrop = containCrop;
 
 /***/ }),
-/* 1 */
+/* 3 */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
 
 /***/ }),
-/* 2 */
-/***/ (function(module, exports) {
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+if (process.env.NODE_ENV !== 'production') {
+  var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
+    Symbol.for &&
+    Symbol.for('react.element')) ||
+    0xeac7;
+
+  var isValidElement = function(object) {
+    return typeof object === 'object' &&
+      object !== null &&
+      object.$$typeof === REACT_ELEMENT_TYPE;
+  };
+
+  // By explicitly using `prop-types` you are opting into new development behavior.
+  // http://fb.me/prop-types-in-prod
+  var throwOnDirectAccess = true;
+  module.exports = __webpack_require__(5)(isValidElement, throwOnDirectAccess);
+} else {
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  module.exports = __webpack_require__(8)();
+}
+
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var assign = __webpack_require__(6);
+
+var ReactPropTypesSecret = __webpack_require__(1);
+var checkPropTypes = __webpack_require__(7);
+
+var printWarning = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  printWarning = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+}
+
+function emptyFunctionThatReturnsNull() {
+  return null;
+}
+
+module.exports = function(isValidElement, throwOnDirectAccess) {
+  /* global Symbol */
+  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+  /**
+   * Returns the iterator method function contained on the iterable object.
+   *
+   * Be sure to invoke the function with the iterable as context:
+   *
+   *     var iteratorFn = getIteratorFn(myIterable);
+   *     if (iteratorFn) {
+   *       var iterator = iteratorFn.call(myIterable);
+   *       ...
+   *     }
+   *
+   * @param {?object} maybeIterable
+   * @return {?function}
+   */
+  function getIteratorFn(maybeIterable) {
+    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+    if (typeof iteratorFn === 'function') {
+      return iteratorFn;
+    }
+  }
+
+  /**
+   * Collection of methods that allow declaration and validation of props that are
+   * supplied to React components. Example usage:
+   *
+   *   var Props = require('ReactPropTypes');
+   *   var MyArticle = React.createClass({
+   *     propTypes: {
+   *       // An optional string prop named "description".
+   *       description: Props.string,
+   *
+   *       // A required enum prop named "category".
+   *       category: Props.oneOf(['News','Photos']).isRequired,
+   *
+   *       // A prop named "dialog" that requires an instance of Dialog.
+   *       dialog: Props.instanceOf(Dialog).isRequired
+   *     },
+   *     render: function() { ... }
+   *   });
+   *
+   * A more formal specification of how these methods are used:
+   *
+   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+   *   decl := ReactPropTypes.{type}(.isRequired)?
+   *
+   * Each and every declaration produces a function with the same signature. This
+   * allows the creation of custom validation functions. For example:
+   *
+   *  var MyLink = React.createClass({
+   *    propTypes: {
+   *      // An optional string or URI prop named "href".
+   *      href: function(props, propName, componentName) {
+   *        var propValue = props[propName];
+   *        if (propValue != null && typeof propValue !== 'string' &&
+   *            !(propValue instanceof URI)) {
+   *          return new Error(
+   *            'Expected a string or an URI for ' + propName + ' in ' +
+   *            componentName
+   *          );
+   *        }
+   *      }
+   *    },
+   *    render: function() {...}
+   *  });
+   *
+   * @internal
+   */
+
+  var ANONYMOUS = '<<anonymous>>';
+
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+  var ReactPropTypes = {
+    array: createPrimitiveTypeChecker('array'),
+    bool: createPrimitiveTypeChecker('boolean'),
+    func: createPrimitiveTypeChecker('function'),
+    number: createPrimitiveTypeChecker('number'),
+    object: createPrimitiveTypeChecker('object'),
+    string: createPrimitiveTypeChecker('string'),
+    symbol: createPrimitiveTypeChecker('symbol'),
+
+    any: createAnyTypeChecker(),
+    arrayOf: createArrayOfTypeChecker,
+    element: createElementTypeChecker(),
+    instanceOf: createInstanceTypeChecker,
+    node: createNodeChecker(),
+    objectOf: createObjectOfTypeChecker,
+    oneOf: createEnumTypeChecker,
+    oneOfType: createUnionTypeChecker,
+    shape: createShapeTypeChecker,
+    exact: createStrictShapeTypeChecker,
+  };
+
+  /**
+   * inlined Object.is polyfill to avoid requiring consumers ship their own
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+   */
+  /*eslint-disable no-self-compare*/
+  function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+      // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Step 6.a: NaN == NaN
+      return x !== x && y !== y;
+    }
+  }
+  /*eslint-enable no-self-compare*/
+
+  /**
+   * We use an Error-like object for backward compatibility as people may call
+   * PropTypes directly and inspect their output. However, we don't use real
+   * Errors anymore. We don't inspect their stack anyway, and creating them
+   * is prohibitively expensive if they are created too often, such as what
+   * happens in oneOfType() for any type before the one that matched.
+   */
+  function PropTypeError(message) {
+    this.message = message;
+    this.stack = '';
+  }
+  // Make `instanceof Error` still work for returned errors.
+  PropTypeError.prototype = Error.prototype;
+
+  function createChainableTypeChecker(validate) {
+    if (process.env.NODE_ENV !== 'production') {
+      var manualPropTypeCallCache = {};
+      var manualPropTypeWarningCount = 0;
+    }
+    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+      componentName = componentName || ANONYMOUS;
+      propFullName = propFullName || propName;
+
+      if (secret !== ReactPropTypesSecret) {
+        if (throwOnDirectAccess) {
+          // New behavior only for users of `prop-types` package
+          var err = new Error(
+            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+            'Use `PropTypes.checkPropTypes()` to call them. ' +
+            'Read more at http://fb.me/use-check-prop-types'
+          );
+          err.name = 'Invariant Violation';
+          throw err;
+        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+          // Old behavior for people using React.PropTypes
+          var cacheKey = componentName + ':' + propName;
+          if (
+            !manualPropTypeCallCache[cacheKey] &&
+            // Avoid spamming the console because they are often not actionable except for lib authors
+            manualPropTypeWarningCount < 3
+          ) {
+            printWarning(
+              'You are manually calling a React.PropTypes validation ' +
+              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
+              'and will throw in the standalone `prop-types` package. ' +
+              'You may be seeing this warning due to a third-party PropTypes ' +
+              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
+            );
+            manualPropTypeCallCache[cacheKey] = true;
+            manualPropTypeWarningCount++;
+          }
+        }
+      }
+      if (props[propName] == null) {
+        if (isRequired) {
+          if (props[propName] === null) {
+            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+          }
+          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+        }
+        return null;
+      } else {
+        return validate(props, propName, componentName, location, propFullName);
+      }
+    }
+
+    var chainedCheckType = checkType.bind(null, false);
+    chainedCheckType.isRequired = checkType.bind(null, true);
+
+    return chainedCheckType;
+  }
+
+  function createPrimitiveTypeChecker(expectedType) {
+    function validate(props, propName, componentName, location, propFullName, secret) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== expectedType) {
+        // `propValue` being instance of, say, date/regexp, pass the 'object'
+        // check, but we can offer a more precise error message here rather than
+        // 'of type `object`'.
+        var preciseType = getPreciseType(propValue);
+
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createAnyTypeChecker() {
+    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+  }
+
+  function createArrayOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+      }
+      var propValue = props[propName];
+      if (!Array.isArray(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+      }
+      for (var i = 0; i < propValue.length; i++) {
+        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
+        if (error instanceof Error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createElementTypeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      if (!isValidElement(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createInstanceTypeChecker(expectedClass) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!(props[propName] instanceof expectedClass)) {
+        var expectedClassName = expectedClass.name || ANONYMOUS;
+        var actualClassName = getClassName(props[propName]);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createEnumTypeChecker(expectedValues) {
+    if (!Array.isArray(expectedValues)) {
+      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
+      return emptyFunctionThatReturnsNull;
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      for (var i = 0; i < expectedValues.length; i++) {
+        if (is(propValue, expectedValues[i])) {
+          return null;
+        }
+      }
+
+      var valuesString = JSON.stringify(expectedValues);
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createObjectOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+      }
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+      }
+      for (var key in propValue) {
+        if (propValue.hasOwnProperty(key)) {
+          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+          if (error instanceof Error) {
+            return error;
+          }
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createUnionTypeChecker(arrayOfTypeCheckers) {
+    if (!Array.isArray(arrayOfTypeCheckers)) {
+      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+      return emptyFunctionThatReturnsNull;
+    }
+
+    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+      var checker = arrayOfTypeCheckers[i];
+      if (typeof checker !== 'function') {
+        printWarning(
+          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
+          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
+        );
+        return emptyFunctionThatReturnsNull;
+      }
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+        var checker = arrayOfTypeCheckers[i];
+        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
+          return null;
+        }
+      }
+
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createNodeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!isNode(props[propName])) {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      for (var key in shapeTypes) {
+        var checker = shapeTypes[key];
+        if (!checker) {
+          continue;
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createStrictShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      // We need to check all keys in case some are required but missing from
+      // props.
+      var allKeys = assign({}, props[propName], shapeTypes);
+      for (var key in allKeys) {
+        var checker = shapeTypes[key];
+        if (!checker) {
+          return new PropTypeError(
+            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
+            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
+            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
+          );
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+
+    return createChainableTypeChecker(validate);
+  }
+
+  function isNode(propValue) {
+    switch (typeof propValue) {
+      case 'number':
+      case 'string':
+      case 'undefined':
+        return true;
+      case 'boolean':
+        return !propValue;
+      case 'object':
+        if (Array.isArray(propValue)) {
+          return propValue.every(isNode);
+        }
+        if (propValue === null || isValidElement(propValue)) {
+          return true;
+        }
+
+        var iteratorFn = getIteratorFn(propValue);
+        if (iteratorFn) {
+          var iterator = iteratorFn.call(propValue);
+          var step;
+          if (iteratorFn !== propValue.entries) {
+            while (!(step = iterator.next()).done) {
+              if (!isNode(step.value)) {
+                return false;
+              }
+            }
+          } else {
+            // Iterator will provide entry [k,v] tuples rather than values.
+            while (!(step = iterator.next()).done) {
+              var entry = step.value;
+              if (entry) {
+                if (!isNode(entry[1])) {
+                  return false;
+                }
+              }
+            }
+          }
+        } else {
+          return false;
+        }
+
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function isSymbol(propType, propValue) {
+    // Native Symbol.
+    if (propType === 'symbol') {
+      return true;
+    }
+
+    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+    if (propValue['@@toStringTag'] === 'Symbol') {
+      return true;
+    }
+
+    // Fallback for non-spec compliant Symbols which are polyfilled.
+    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // Equivalent of `typeof` but with special handling for array and regexp.
+  function getPropType(propValue) {
+    var propType = typeof propValue;
+    if (Array.isArray(propValue)) {
+      return 'array';
+    }
+    if (propValue instanceof RegExp) {
+      // Old webkits (at least until Android 4.0) return 'function' rather than
+      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+      // passes PropTypes.object.
+      return 'object';
+    }
+    if (isSymbol(propType, propValue)) {
+      return 'symbol';
+    }
+    return propType;
+  }
+
+  // This handles more types than `getPropType`. Only used for error messages.
+  // See `createPrimitiveTypeChecker`.
+  function getPreciseType(propValue) {
+    if (typeof propValue === 'undefined' || propValue === null) {
+      return '' + propValue;
+    }
+    var propType = getPropType(propValue);
+    if (propType === 'object') {
+      if (propValue instanceof Date) {
+        return 'date';
+      } else if (propValue instanceof RegExp) {
+        return 'regexp';
+      }
+    }
+    return propType;
+  }
+
+  // Returns a string that is postfixed to a warning about an invalid type.
+  // For example, "undefined" or "of type array"
+  function getPostfixForTypeWarning(value) {
+    var type = getPreciseType(value);
+    switch (type) {
+      case 'array':
+      case 'object':
+        return 'an ' + type;
+      case 'boolean':
+      case 'date':
+      case 'regexp':
+        return 'a ' + type;
+      default:
+        return type;
+    }
+  }
+
+  // Returns class name of the object, if any.
+  function getClassName(propValue) {
+    if (!propValue.constructor || !propValue.constructor.name) {
+      return ANONYMOUS;
+    }
+    return propValue.constructor.name;
+  }
+
+  ReactPropTypes.checkPropTypes = checkPropTypes;
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+module.exports = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};
+
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* WEBPACK VAR INJECTION */(function(process) {/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var printWarning = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactPropTypesSecret = __webpack_require__(1);
+  var loggedTypeFailures = {};
+
+  printWarning = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+}
+
+/**
+ * Assert that the values match with the type specs.
+ * Error messages are memorized and will only be shown once.
+ *
+ * @param {object} typeSpecs Map of name to a ReactPropType
+ * @param {object} values Runtime values that need to be type-checked
+ * @param {string} location e.g. "prop", "context", "child context"
+ * @param {string} componentName Name of the component for error messages.
+ * @param {?Function} getStack Returns the component stack.
+ * @private
+ */
+function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+  if (process.env.NODE_ENV !== 'production') {
+    for (var typeSpecName in typeSpecs) {
+      if (typeSpecs.hasOwnProperty(typeSpecName)) {
+        var error;
+        // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error(
+              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
+            );
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+        } catch (ex) {
+          error = ex;
+        }
+        if (error && !(error instanceof Error)) {
+          printWarning(
+            (componentName || 'React class') + ': type specification of ' +
+            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
+            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
+            'You may have forgotten to pass an argument to the type checker ' +
+            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+            'shape all require an argument).'
+          )
+
+        }
+        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error.message] = true;
+
+          var stack = getStack ? getStack() : '';
+
+          printWarning(
+            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
+          );
+        }
+      }
+    }
+  }
+}
+
+module.exports = checkPropTypes;
+
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+var ReactPropTypesSecret = __webpack_require__(1);
+
+function emptyFunction() {}
+
+module.exports = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = new Error(
+      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+      'Use PropTypes.checkPropTypes() to call them. ' +
+      'Read more at http://fb.me/use-check-prop-types'
+    );
+    err.name = 'Invariant Violation';
+    throw err;
+  };
+  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  };
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim
+  };
+
+  ReactPropTypes.checkPropTypes = emptyFunction;
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
 
 /***/ })
 /******/ ]);
diff --git a/dist/ReactCrop.min.js b/dist/ReactCrop.min.js
index 645f9db..600a444 100644
--- a/dist/ReactCrop.min.js
+++ b/dist/ReactCrop.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports.ReactCrop=t(require("react"),require("prop-types")):e.ReactCrop=t(e.React,e.PropTypes)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(o){if(r[o])return r[o].exports;var a=r[o]={i:o,l:!1,exports:{}};return e[o].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,o){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function a(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function d(e){var t=void 0,r=void 0;if(e.touches){var o=w(e.touches,1),a=o[0];t=a.pageX,r=a.pageY}else t=e.pageX,r=e.pageY;return{x:t,y:r}}function c(e,t,r){return Math.min(Math.max(e,t),r)}function h(e){return e&&e.width&&e.height&&!isNaN(e.width)&&!isNaN(e.height)}function u(e){var t=void 0;return"n"===e?t="s":"ne"===e?t="sw":"e"===e?t="w":"se"===e?t="nw":"s"===e?t="n":"sw"===e?t="ne":"w"===e?t="e":"nw"===e&&(t="se"),t}function p(e,t){if(isNaN(e.aspect)||isNaN(t))return console.warn("`crop.aspect` and `imageAspect` need to be numbers in order to make an aspect crop",e),e;var r=y({x:0,y:0},e);return e.width&&(r.height=e.width/e.aspect*t),e.height&&(r.width=(r.height||e.height)*(e.aspect/t)),e.y+(r.height||e.height)>100&&(r.height=100-e.y,r.width=r.height*e.aspect/t),e.x+(r.width||e.width)>100&&(r.width=100-e.x,r.height=r.width/e.aspect*t),r}function l(e,t,r){return!!(!e.width&&e.height||e.width&&!e.height)||!(!e.width||!e.height||Math.round(r*(e.height/100)*e.aspect)===Math.round(t*(e.width/100)))}function f(e,t){return e&&e.aspect&&l(e,t.naturalWidth,t.naturalHeight)?p(e,t.naturalWidth/t.naturalHeight):e}function g(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];if(!e||!t)return null;var o=r?e.naturalWidth:e.width,a=r?e.naturalHeight:e.height,n=Math.round(o*(t.x/100)),i=Math.round(a*(t.y/100)),s=Math.round(o*(t.width/100)),d=Math.round(a*(t.height/100));return{x:n,y:i,width:c(s,0,o-n),height:c(d,0,a-i)}}function m(e,t,r){var o=y({},t);t.aspect&&e.x>t.x&&t.height+t.y>=100&&(o.x=e.x);var a=!1;o.x+o.width>100?(o.width=t.width+(100-(t.x+t.width)),o.x=t.x+(100-(t.x+o.width)),a=!0):o.x<0&&(o.width=t.x+t.width,o.x=0,a=!0),a&&t.aspect&&(o.height=o.width/t.aspect*r,e.y>o.y&&(o.y=t.y+(t.height-o.height)));var n=!1;return o.y+o.height>100?(o.height=t.height+(100-(t.y+t.height)),o.y=t.y+(100-(t.y+o.height)),n=!0):o.y<0&&(o.height=t.y+t.height,o.y=0,n=!0),n&&t.aspect&&(o.width=o.height*t.aspect/r,o.x<t.x&&(o.x=t.x+(t.width-o.width))),o}Object.defineProperty(t,"__esModule",{value:!0}),t.containCrop=t.makeAspectCrop=t.getPixelCrop=t.Component=t.default=void 0;var v=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},w=function(){function e(e,t){var r=[],o=!0,a=!1,n=void 0;try{for(var i,s=e[Symbol.iterator]();!(o=(i=s.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){a=!0,n=e}finally{try{!o&&s.return&&s.return()}finally{if(a)throw n}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),C=r(1),x=o(C),O=r(2),b=o(O),S=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){return S=!0,!0}}))}catch(e){}var D=function(e){function t(){var e,r,o,a;n(this,t);for(var s=arguments.length,u=Array(s),p=0;p<s;p++)u[p]=arguments[p];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),o.window=window,o.document=document,o.state={},o.onCropMouseTouchDown=function(e){var t=o.props,r=t.crop;if(!t.disabled){e.preventDefault();var a=d(e);o.componentRef.focus({preventScroll:!0});var n=e.target.dataset.ord,i="nw"===n||"w"===n||"sw"===n,s="nw"===n||"n"===n||"ne"===n,c=void 0;r.aspect&&(c=o.getElementOffset(o.cropSelectRef)),o.evData={clientStartX:a.x,clientStartY:a.y,cropStartWidth:r.width,cropStartHeight:r.height,cropStartX:i?r.x+r.width:r.x,cropStartY:s?r.y+r.height:r.y,xInversed:i,yInversed:s,xCrossOver:i,yCrossOver:s,startXCrossOver:i,startYCrossOver:s,isResize:e.target.dataset.ord,ord:n,cropOffset:c},o.mouseDownOnCrop=!0,o.setState({cropIsActive:!0})}},o.onComponentMouseTouchDown=function(e){var t=o.props,r=t.crop,a=t.disabled,n=t.locked,i=t.keepSelection,s=t.onChange,c=t.useNaturalImageDimensions;if(e.target===o.imageRef&&!(a||n||i&&h(r))){e.preventDefault();var u=d(e);o.componentRef.focus({preventScroll:!0});var p=o.getElementOffset(o.imageRef),l=(u.x-p.left)/o.imageRef.width*100,f=(u.y-p.top)/o.imageRef.height*100,m={aspect:r?r.aspect:void 0,x:l,y:f,width:0,height:0};o.evData={clientStartX:u.x,clientStartY:u.y,cropStartWidth:m.width,cropStartHeight:m.height,cropStartX:m.x,cropStartY:m.y,xInversed:!1,yInversed:!1,xCrossOver:!1,yCrossOver:!1,startXCrossOver:!1,startYCrossOver:!1,isResize:!0,ord:"nw"},o.mouseDownOnCrop=!0,s(m,g(o.imageRef,m,c)),o.setState({cropIsActive:!0})}},o.onDocMouseTouchMove=function(e){var t=o.props,r=t.crop,a=t.disabled,n=t.onChange,i=t.onDragStart;if(!a&&o.mouseDownOnCrop){e.preventDefault(),o.dragStarted||(o.dragStarted=!0,i());var s=o,c=s.evData,h=d(e);c.isResize&&r.aspect&&c.cropOffset&&(h.y=o.straightenYPath(h.x));var u=h.x-c.clientStartX;c.xDiffPc=u/o.imageRef.width*100;var p=h.y-c.clientStartY;c.yDiffPc=p/o.imageRef.height*100;var l=void 0;l=c.isResize?o.resizeCrop():o.dragCrop(),l!==r&&n(l,g(o.imageRef,l))}},o.onComponentKeyDown=function(e){var r=o.props,a=r.crop,n=r.disabled,i=r.onChange,s=r.onComplete,d=r.useNaturalImageDimensions;if(!n){var u=e.which,p=!1;if(h(a)){var l=o.makeNewCrop();u===t.arrowKey.left?(l.x-=t.nudgeStep,p=!0):u===t.arrowKey.right?(l.x+=t.nudgeStep,p=!0):u===t.arrowKey.up?(l.y-=t.nudgeStep,p=!0):u===t.arrowKey.down&&(l.y+=t.nudgeStep,p=!0),p&&(e.preventDefault(),l.x=c(l.x,0,100-l.width),l.y=c(l.y,0,100-l.height),i(l,g(o.imageRef,l,d)),s(l,g(o.imageRef,l,d)))}}},o.onDocMouseTouchEnd=function(){var e=o.props,t=e.crop,r=e.disabled,a=e.onComplete,n=e.onDragEnd,i=e.useNaturalImageDimensions;r||o.mouseDownOnCrop&&(o.mouseDownOnCrop=!1,o.dragStarted=!1,n(),a(t,g(o.imageRef,t,i)),o.setState({cropIsActive:!1}))},a=r,i(o,a)}return s(t,e),v(t,[{key:"componentDidMount",value:function(){var e=!!S&&{passive:!1};if(this.document.addEventListener("mousemove",this.onDocMouseTouchMove,e),this.document.addEventListener("touchmove",this.onDocMouseTouchMove,e),this.document.addEventListener("mouseup",this.onDocMouseTouchEnd,e),this.document.addEventListener("touchend",this.onDocMouseTouchEnd,e),this.document.addEventListener("touchcancel",this.onDocMouseTouchEnd,e),this.imageRef.complete||this.imageRef.readyState)if(0===this.imageRef.naturalWidth){var t=this.imageRef.src;this.imageRef.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",this.imageRef.src=t}else this.onImageLoad(this.imageRef)}},{key:"componentWillUnmount",value:function(){this.document.removeEventListener("mousemove",this.onDocMouseTouchMove),this.document.removeEventListener("touchmove",this.onDocMouseTouchMove),this.document.removeEventListener("mouseup",this.onDocMouseTouchEnd),this.document.removeEventListener("touchend",this.onDocMouseTouchEnd),this.document.removeEventListener("touchcancel",this.onDocMouseTouchEnd)}},{key:"onImageLoad",value:function(e){var t=this.props,r=t.crop,o=t.onComplete,a=t.onChange,n=t.onImageLoaded,i=t.useNaturalImageDimensions,s=f(r,e);!1!==n(e,g(e,s,i))&&s!==r&&(a(s,g(e,s,i)),o(s,g(e,s,i)))}},{key:"getElementOffset",value:function(e){var t=e.getBoundingClientRect(),r=this.document.documentElement;return{top:t.top+this.window.pageYOffset-r.clientTop,left:t.left+this.window.pageXOffset-r.clientLeft}}},{key:"getCropStyle",value:function(){var e=this.props.crop;return{top:e.y+"%",left:e.x+"%",width:e.width+"%",height:e.height+"%"}}},{key:"getNewSize",value:function(){var e=this.props,t=e.crop,r=e.minWidth,o=e.maxWidth,a=e.minHeight,n=e.maxHeight,i=this.evData,s=this.imageRef.width/this.imageRef.height,d=i.cropStartWidth+i.xDiffPc;i.xCrossOver&&(d=Math.abs(d)),d=c(d,r,o);var h=void 0;return h=t.aspect?d/t.aspect*s:i.cropStartHeight+i.yDiffPc,i.yCrossOver&&(h=Math.min(Math.abs(h),i.cropStartY)),h=c(h,a,n),t.aspect&&(d=c(h*t.aspect/s,0,100)),{width:d,height:h}}},{key:"dragCrop",value:function(){var e=this.makeNewCrop(),t=this.evData;return e.x=c(t.cropStartX+t.xDiffPc,0,100-e.width),e.y=c(t.cropStartY+t.yDiffPc,0,100-e.height),e}},{key:"resizeCrop",value:function(){var e=this.makeNewCrop(),r=this.evData,o=this.props,a=o.crop,n=o.minWidth,i=o.minHeight,s=r.ord,d=this.imageRef.width/this.imageRef.height;r.xInversed&&(r.xDiffPc-=2*r.cropStartWidth),r.yInversed&&(r.yDiffPc-=2*r.cropStartHeight);var c=this.getNewSize(),h=r.cropStartX,u=r.cropStartY;r.xCrossOver&&(h=e.x+(e.width-c.width)),r.yCrossOver&&(u=!1===r.lastYCrossover?e.y-c.height:e.y+(e.height-c.height));var p=m(this.props.crop,{x:h,y:u,width:c.width,height:c.height,aspect:e.aspect},d);return e.aspect||t.xyOrds.indexOf(s)>-1?(e.x=p.x,e.y=p.y,e.width=p.width,e.height=p.height):t.xOrds.indexOf(s)>-1?(e.x=p.x,e.width=p.width):t.yOrds.indexOf(s)>-1&&(e.y=p.y,e.height=p.height),r.lastYCrossover=r.yCrossOver,this.crossOverCheck(),n&&e.width<n?a:i&&e.height<i?a:e}},{key:"straightenYPath",value:function(e){var t=this.evData,r=t.ord,o=t.cropOffset,a=t.cropStartWidth/100*this.imageRef.width,n=t.cropStartHeight/100*this.imageRef.height,i=void 0,s=void 0;return"nw"===r||"se"===r?(i=n/a,s=o.top-o.left*i):(i=-n/a,s=o.top+(n-o.left*i)),i*e+s}},{key:"createCropSelection",value:function(){var e=this,t=this.props,r=t.disabled,o=t.locked,a=t.renderSelectionAddon,n=this.getCropStyle();return x.default.createElement("div",{ref:function(t){e.cropSelectRef=t},style:n,className:"ReactCrop__crop-selection",onMouseDown:this.onCropMouseTouchDown,onTouchStart:this.onCropMouseTouchDown,role:"presentation"},!r&&!o&&x.default.createElement("div",{className:"ReactCrop__drag-elements"},x.default.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),x.default.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),x.default.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),x.default.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw"}),x.default.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w"})),a&&a(this.state))}},{key:"makeNewCrop",value:function(){return y({},t.defaultCrop,this.props.crop)}},{key:"crossOverCheck",value:function(){var e=this.evData;(!e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiffPc>=0||e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiffPc<=0)&&(e.xCrossOver=!e.xCrossOver),(!e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiffPc>=0||e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiffPc<=0)&&(e.yCrossOver=!e.yCrossOver);var t=e.xCrossOver!==e.startXCrossOver,r=e.yCrossOver!==e.startYCrossOver;e.inversedXOrd=!!t&&u(e.ord),e.inversedYOrd=!!r&&u(e.ord)}},{key:"render",value:function(){var e=this,t=this.props,r=t.children,o=t.className,n=t.crossorigin,i=t.crop,s=t.disabled,d=t.locked,c=t.imageAlt,u=t.onImageError,p=t.src,l=t.style,f=t.imageStyle,g=this.state.cropIsActive,m=void 0;h(i)&&(m=this.createCropSelection());var v=["ReactCrop"];return g&&v.push("ReactCrop--active"),i&&(i.aspect&&v.push("ReactCrop--fixed-aspect"),!g||i.width&&i.height||v.push("ReactCrop--crop-invisible")),s&&v.push("ReactCrop--disabled"),d&&v.push("ReactCrop--locked"),o&&v.push.apply(v,a(o.split(" "))),x.default.createElement("div",{ref:function(t){e.componentRef=t},className:v.join(" "),style:l,onTouchStart:this.onComponentMouseTouchDown,onMouseDown:this.onComponentMouseTouchDown,role:"presentation",tabIndex:1,onKeyDown:this.onComponentKeyDown},x.default.createElement("img",{ref:function(t){e.imageRef=t},crossOrigin:n,className:"ReactCrop__image",style:f,src:p,onLoad:function(t){return e.onImageLoad(t.target)},onError:u,alt:c}),r,m)}}]),t}(C.PureComponent);D.xOrds=["e","w"],D.yOrds=["n","s"],D.xyOrds=["nw","ne","se","sw"],D.arrowKey={left:37,up:38,right:39,down:40},D.nudgeStep=.2,D.defaultCrop={x:0,y:0,width:0,height:0},D.propTypes={className:b.default.string,crossorigin:b.default.string,children:b.default.oneOfType([b.default.arrayOf(b.default.node),b.default.node]),crop:b.default.shape({aspect:b.default.number,x:b.default.number,y:b.default.number,width:b.default.number,height:b.default.number}),disabled:b.default.bool,locked:b.default.bool,imageAlt:b.default.string,imageStyle:b.default.shape({}),keepSelection:b.default.bool,minWidth:b.default.number,minHeight:b.default.number,maxWidth:b.default.number,maxHeight:b.default.number,onChange:b.default.func.isRequired,onImageError:b.default.func,onComplete:b.default.func,onImageLoaded:b.default.func,onDragStart:b.default.func,onDragEnd:b.default.func,src:b.default.string.isRequired,style:b.default.shape({}),renderSelectionAddon:b.default.func},D.defaultProps={className:void 0,crop:void 0,crossorigin:void 0,disabled:!1,locked:!1,imageAlt:"",maxWidth:100,maxHeight:100,minWidth:0,minHeight:0,keepSelection:!1,onComplete:function(){},onImageError:function(){},onImageLoaded:function(){},onDragStart:function(){},onDragEnd:function(){},children:void 0,style:void 0,imageStyle:void 0,renderSelectionAddon:void 0,useNaturalImageDimensions:!0},t.default=D,t.Component=D,t.getPixelCrop=g,t.makeAspectCrop=p,t.containCrop=m},function(t,r){t.exports=e},function(e,r){e.exports=t}])});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCrop=t(require("react")):e.ReactCrop=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,o){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function n(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function c(e){var t=void 0,r=void 0;if(e.touches){var o=y(e.touches,1),n=o[0];t=n.pageX,r=n.pageY}else t=e.pageX,r=e.pageY;return{x:t,y:r}}function d(e,t,r){return Math.min(Math.max(e,t),r)}function h(e){return e&&e.width&&e.height&&!isNaN(e.width)&&!isNaN(e.height)}function u(e){var t=void 0;return"n"===e?t="s":"ne"===e?t="sw":"e"===e?t="w":"se"===e?t="nw":"s"===e?t="n":"sw"===e?t="ne":"w"===e?t="e":"nw"===e&&(t="se"),t}function p(e,t){if(isNaN(e.aspect))return console.warn("`crop.aspect` should be a number in order to make an aspect crop",e),e;var r=m({x:0,y:0},e);return e.width&&(r.height=e.width/e.aspect),e.height&&(r.width=(r.height||e.height)*e.aspect),e.y+(r.height||e.height)>t.height&&(r.height=t.height-e.y,r.width=r.height*e.aspect),e.x+(r.width||e.width)>t.width&&(r.width=t.width-e.x,r.height=r.width/e.aspect),r}function f(e,t){return!!(!e.width&&e.height||e.width&&!e.height)||(e.width/e.aspect!==e.height||e.height*e.aspect!==e.width||e.y+e.height>t.height||e.x+e.width>t.width)}function l(e,t){return e&&e.aspect&&f(e,t)?p(e,t):e}function v(e,t,r){var o=m({},t);t.aspect&&e.x>t.x&&t.height+t.y>=r.height&&(o.x=e.x);var n=!1;o.x+o.width>r.width?(o.width=t.width+(r.width-(t.x+t.width)),o.x=t.x+(r.width-(t.x+o.width)),n=!0):o.x<0&&(o.width=t.x+t.width,o.x=0,n=!0),n&&t.aspect&&(o.height=o.width/t.aspect,e.y>o.y&&(o.y=t.y+(t.height-o.height)));var a=!1;return o.y+o.height>r.height?(o.height=t.height+(r.height-(t.y+t.height)),o.y=t.y+(r.height-(t.y+o.height)),a=!0):o.y<0&&(o.height=t.y+t.height,o.y=0,a=!0),a&&t.aspect&&(o.width=o.height*t.aspect,o.x<t.x&&(o.x=t.x+(t.width-o.width))),o}Object.defineProperty(t,"__esModule",{value:!0}),t.containCrop=t.makeAspectCrop=t.Component=t.default=void 0;var g=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},y=function(){function e(e,t){var r=[],o=!0,n=!1,a=void 0;try{for(var i,s=e[Symbol.iterator]();!(o=(i=s.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){n=!0,a=e}finally{try{!o&&s.return&&s.return()}finally{if(n)throw a}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),w=r(1),C=o(w),x=r(2),O=o(x),b=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){return b=!0,!0}}))}catch(e){}var S=function(e){function t(){var e,r,o,n;a(this,t);for(var s=arguments.length,u=Array(s),p=0;p<s;p++)u[p]=arguments[p];return r=o=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),o.window=window,o.document=document,o.state={},o.onCropMouseTouchDown=function(e){var t=o.props,r=t.crop;if(!t.disabled){e.preventDefault();var n=c(e);o.componentRef.focus({preventScroll:!0});var a=e.target.dataset.ord,i="nw"===a||"w"===a||"sw"===a,s="nw"===a||"n"===a||"ne"===a,d=void 0;r.aspect&&(d=o.getElementOffset(o.cropSelectRef)),o.evData={clientStartX:n.x,clientStartY:n.y,cropStartWidth:r.width,cropStartHeight:r.height,cropStartX:i?r.x+r.width:r.x,cropStartY:s?r.y+r.height:r.y,xInversed:i,yInversed:s,xCrossOver:i,yCrossOver:s,startXCrossOver:i,startYCrossOver:s,isResize:e.target.dataset.ord,ord:a,cropOffset:d},o.mouseDownOnCrop=!0,o.setState({cropIsActive:!0})}},o.onComponentMouseTouchDown=function(e){var t=o.props,r=t.crop,n=t.disabled,a=t.locked,i=t.keepSelection,s=t.onChange;if(e.target===o.imageRef&&!(n||a||i&&h(r))){e.preventDefault();var d=c(e);o.componentRef.focus({preventScroll:!0});var u=o.getElementOffset(o.imageRef),p=d.x-u.left,f=d.y-u.top,l={aspect:r?r.aspect:void 0,x:p,y:f,width:0,height:0};o.evData={clientStartX:d.x,clientStartY:d.y,cropStartWidth:l.width,cropStartHeight:l.height,cropStartX:l.x,cropStartY:l.y,xInversed:!1,yInversed:!1,xCrossOver:!1,yCrossOver:!1,startXCrossOver:!1,startYCrossOver:!1,isResize:!0,ord:"nw"},o.mouseDownOnCrop=!0,s(l),o.setState({cropIsActive:!0})}},o.onDocMouseTouchMove=function(e){var t=o.props,r=t.crop,n=t.disabled,a=t.onChange,i=t.onDragStart;if(!n&&o.mouseDownOnCrop){e.preventDefault(),o.dragStarted||(o.dragStarted=!0,i());var s=o,d=s.evData,h=c(e);d.isResize&&r.aspect&&d.cropOffset&&(h.y=o.straightenYPath(h.x)),d.xDiff=h.x-d.clientStartX,d.yDiff=h.y-d.clientStartY;var u=void 0;u=d.isResize?o.resizeCrop():o.dragCrop(),u!==r&&a(u)}},o.onComponentKeyDown=function(e){var r=o.props,n=r.crop,a=r.disabled,i=r.onChange,s=r.onComplete;if(!a){var c=e.which,u=!1;if(h(n)){var p=o.makeNewCrop();c===t.arrowKey.left?(p.x-=t.nudgeStep,u=!0):c===t.arrowKey.right?(p.x+=t.nudgeStep,u=!0):c===t.arrowKey.up?(p.y-=t.nudgeStep,u=!0):c===t.arrowKey.down&&(p.y+=t.nudgeStep,u=!0),u&&(e.preventDefault(),p.x=d(p.x,0,o.imageRef.width-p.width),p.y=d(p.y,0,o.imageRef.height-p.height),i(p),s(p))}}},o.onDocMouseTouchEnd=function(){var e=o.props,t=e.crop,r=e.disabled,n=e.onComplete,a=e.onDragEnd;r||o.mouseDownOnCrop&&(o.mouseDownOnCrop=!1,o.dragStarted=!1,a(),n(t),o.setState({cropIsActive:!1}))},n=r,i(o,n)}return s(t,e),g(t,[{key:"componentDidMount",value:function(){var e=!!b&&{passive:!1};if(this.document.addEventListener("mousemove",this.onDocMouseTouchMove,e),this.document.addEventListener("touchmove",this.onDocMouseTouchMove,e),this.document.addEventListener("mouseup",this.onDocMouseTouchEnd,e),this.document.addEventListener("touchend",this.onDocMouseTouchEnd,e),this.document.addEventListener("touchcancel",this.onDocMouseTouchEnd,e),this.imageRef.complete||this.imageRef.readyState)if(0===this.imageRef.naturalWidth){var t=this.imageRef.src;this.imageRef.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",this.imageRef.src=t}else this.onImageLoad(this.imageRef)}},{key:"componentWillUnmount",value:function(){this.document.removeEventListener("mousemove",this.onDocMouseTouchMove),this.document.removeEventListener("touchmove",this.onDocMouseTouchMove),this.document.removeEventListener("mouseup",this.onDocMouseTouchEnd),this.document.removeEventListener("touchend",this.onDocMouseTouchEnd),this.document.removeEventListener("touchcancel",this.onDocMouseTouchEnd)}},{key:"onImageLoad",value:function(e){var t=this.props,r=t.crop,o=t.onComplete,n=t.onChange,a=t.onImageLoaded,i=l(r,e);!1!==a(e)&&i!==r&&(n(i),o(i))}},{key:"getElementOffset",value:function(e){var t=e.getBoundingClientRect(),r=this.document.documentElement;return{top:t.top+this.window.pageYOffset-r.clientTop,left:t.left+this.window.pageXOffset-r.clientLeft}}},{key:"getCropStyle",value:function(){var e=this.props.crop;return{transform:"translate("+e.x+"px, "+e.y+"px)",width:e.width+"px",height:e.height+"px"}}},{key:"getNewSize",value:function(){var e=this.props,t=e.crop,r=e.minWidth,o=e.maxWidth,n=e.minHeight,a=e.maxHeight,i=this.evData,s=this.imageRef,c=i.cropStartWidth+i.xDiff;i.xCrossOver&&(c=Math.abs(c)),c=d(c,r,o||s.width);var h=void 0;return h=t.aspect?c/t.aspect:i.cropStartHeight+i.yDiff,i.yCrossOver&&(h=Math.min(Math.abs(h),i.cropStartY)),h=d(h,n,a||s.height),t.aspect&&(c=d(h*t.aspect,0,this.imageRef.width)),{width:c,height:h}}},{key:"dragCrop",value:function(){var e=this.makeNewCrop(),t=this.evData;return e.x=d(t.cropStartX+t.xDiff,0,this.imageRef.width-e.width),e.y=d(t.cropStartY+t.yDiff,0,this.imageRef.height-e.height),e}},{key:"resizeCrop",value:function(){var e=this.makeNewCrop(),r=this.evData,o=this.props,n=o.crop,a=o.minWidth,i=o.minHeight,s=r.ord;r.xInversed&&(r.xDiff-=2*r.cropStartWidth),r.yInversed&&(r.yDiff-=2*r.cropStartHeight);var c=this.getNewSize(),d=r.cropStartX,h=r.cropStartY;r.xCrossOver&&(d=e.x+(e.width-c.width)),r.yCrossOver&&(h=!1===r.lastYCrossover?e.y-c.height:e.y+(e.height-c.height));var u=v(this.props.crop,{x:d,y:h,width:c.width,height:c.height,aspect:e.aspect},this.imageRef);return e.aspect||t.xyOrds.indexOf(s)>-1?(e.x=u.x,e.y=u.y,e.width=u.width,e.height=u.height):t.xOrds.indexOf(s)>-1?(e.x=u.x,e.width=u.width):t.yOrds.indexOf(s)>-1&&(e.y=u.y,e.height=u.height),r.lastYCrossover=r.yCrossOver,this.crossOverCheck(),a&&e.width<a?n:i&&e.height<i?n:e}},{key:"straightenYPath",value:function(e){var t=this.evData,r=t.ord,o=t.cropOffset,n=t.cropStartWidth,a=t.cropStartHeight,i=void 0,s=void 0;return"nw"===r||"se"===r?(i=a/n,s=o.top-o.left*i):(i=-a/n,s=o.top+(a-o.left*i)),i*e+s}},{key:"createCropSelection",value:function(){var e=this,t=this.props,r=t.disabled,o=t.locked,n=t.renderSelectionAddon,a=this.getCropStyle();return C.default.createElement("div",{ref:function(t){e.cropSelectRef=t},style:a,className:"ReactCrop__crop-selection",onMouseDown:this.onCropMouseTouchDown,onTouchStart:this.onCropMouseTouchDown,role:"presentation"},!r&&!o&&C.default.createElement("div",{className:"ReactCrop__drag-elements"},C.default.createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),C.default.createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),C.default.createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),C.default.createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw"}),C.default.createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w"})),n&&n(this.state))}},{key:"makeNewCrop",value:function(){return m({},t.defaultCrop,this.props.crop)}},{key:"crossOverCheck",value:function(){var e=this.evData;(!e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff>=0||e.xCrossOver&&-Math.abs(e.cropStartWidth)-e.xDiff<=0)&&(e.xCrossOver=!e.xCrossOver),(!e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff>=0||e.yCrossOver&&-Math.abs(e.cropStartHeight)-e.yDiff<=0)&&(e.yCrossOver=!e.yCrossOver);var t=e.xCrossOver!==e.startXCrossOver,r=e.yCrossOver!==e.startYCrossOver;e.inversedXOrd=!!t&&u(e.ord),e.inversedYOrd=!!r&&u(e.ord)}},{key:"render",value:function(){var e=this,t=this.props,r=t.children,o=t.className,a=t.crossorigin,i=t.crop,s=t.disabled,c=t.locked,d=t.imageAlt,u=t.onImageError,p=t.src,f=t.style,l=t.imageStyle,v=this.state.cropIsActive,g=void 0;h(i)&&(g=this.createCropSelection());var m=["ReactCrop"];return v&&m.push("ReactCrop--active"),i&&(i.aspect&&m.push("ReactCrop--fixed-aspect"),!v||i.width&&i.height||m.push("ReactCrop--crop-invisible")),s&&m.push("ReactCrop--disabled"),c&&m.push("ReactCrop--locked"),o&&m.push.apply(m,n(o.split(" "))),C.default.createElement("div",{ref:function(t){e.componentRef=t},className:m.join(" "),style:f,onTouchStart:this.onComponentMouseTouchDown,onMouseDown:this.onComponentMouseTouchDown,role:"presentation",tabIndex:1,onKeyDown:this.onComponentKeyDown},C.default.createElement("img",{ref:function(t){e.imageRef=t},crossOrigin:a,className:"ReactCrop__image",style:l,src:p,onLoad:function(t){return e.onImageLoad(t.target)},onError:u,alt:d}),r,g)}}]),t}(w.PureComponent);S.xOrds=["e","w"],S.yOrds=["n","s"],S.xyOrds=["nw","ne","se","sw"],S.arrowKey={left:37,up:38,right:39,down:40},S.nudgeStep=.2,S.defaultCrop={x:0,y:0,width:0,height:0},S.propTypes={className:O.default.string,crossorigin:O.default.string,children:O.default.oneOfType([O.default.arrayOf(O.default.node),O.default.node]),crop:O.default.shape({aspect:O.default.number,x:O.default.number,y:O.default.number,width:O.default.number,height:O.default.number}),disabled:O.default.bool,locked:O.default.bool,imageAlt:O.default.string,imageStyle:O.default.shape({}),keepSelection:O.default.bool,minWidth:O.default.number,minHeight:O.default.number,maxWidth:O.default.number,maxHeight:O.default.number,onChange:O.default.func.isRequired,onImageError:O.default.func,onComplete:O.default.func,onImageLoaded:O.default.func,onDragStart:O.default.func,onDragEnd:O.default.func,src:O.default.string.isRequired,style:O.default.shape({}),renderSelectionAddon:O.default.func},S.defaultProps={className:void 0,crop:void 0,crossorigin:void 0,disabled:!1,locked:!1,imageAlt:"",maxWidth:void 0,maxHeight:void 0,minWidth:0,minHeight:0,keepSelection:!1,onComplete:function(){},onImageError:function(){},onImageLoaded:function(){},onDragStart:function(){},onDragEnd:function(){},children:void 0,style:void 0,imageStyle:void 0,renderSelectionAddon:void 0},t.default=S,t.Component=S,t.makeAspectCrop=p,t.containCrop=v},function(t,r){t.exports=e},function(e,t,r){e.exports=r(3)()},function(e,t,r){"use strict";function o(){}var n=r(4);e.exports=function(){function e(e,t,r,o,a,i){if(i!==n){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=o,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});
\ No newline at end of file
diff --git a/lib/ReactCrop.js b/lib/ReactCrop.js
index c23fd49..dd82524 100644
--- a/lib/ReactCrop.js
+++ b/lib/ReactCrop.js
@@ -53,9 +53,9 @@ function inverseOrd(ord) {
   return inversedOrd;
 }
 
-function makeAspectCrop(crop, imageAspect) {
-  if (isNaN(crop.aspect) || isNaN(imageAspect)) {
-    console.warn('`crop.aspect` and `imageAspect` need to be numbers in order to make an aspect crop', crop);
+function makeAspectCrop(crop, image) {
+  if (isNaN(crop.aspect)) {
+    console.warn('`crop.aspect` should be a number in order to make an aspect crop', crop);
     return crop;
   }
 
@@ -66,85 +66,60 @@ function makeAspectCrop(crop, imageAspect) {
   };
 
   if (crop.width) {
-    completeCrop.height = (crop.width / crop.aspect) * imageAspect;
+    completeCrop.height = crop.width / crop.aspect;
   }
   if (crop.height) {
-    completeCrop.width = (completeCrop.height || crop.height) * (crop.aspect / imageAspect);
+    completeCrop.width = (completeCrop.height || crop.height) * crop.aspect;
   }
 
-  if (crop.y + (completeCrop.height || crop.height) > 100) {
-    completeCrop.height = 100 - crop.y;
-    completeCrop.width = (completeCrop.height * crop.aspect) / imageAspect;
+  if (crop.y + (completeCrop.height || crop.height) > image.height) {
+    completeCrop.height = image.height - crop.y;
+    completeCrop.width = completeCrop.height * crop.aspect;
   }
 
-  if (crop.x + (completeCrop.width || crop.width) > 100) {
-    completeCrop.width = 100 - crop.x;
-    completeCrop.height = (completeCrop.width / crop.aspect) * imageAspect;
+  if (crop.x + (completeCrop.width || crop.width) > image.width) {
+    completeCrop.width = image.width - crop.x;
+    completeCrop.height = completeCrop.width / crop.aspect;
   }
 
   return completeCrop;
 }
 
-function isAspectInvalid(crop, width, height) {
+function isAspectInvalid(crop, image) {
   if ((!crop.width && crop.height) || (crop.width && !crop.height)) {
     return true;
   }
 
-  if (
-    crop.width &&
-    crop.height &&
-    Math.round((height * (crop.height / 100)) * crop.aspect) !== Math.round((width * (crop.width / 100)))
-  ) {
-    return true;
-  }
-
-  return false;
+  return (
+    crop.width / crop.aspect !== crop.height ||
+    crop.height * crop.aspect !== crop.width ||
+    crop.y + crop.height > image.height ||
+    crop.x + crop.width > image.width
+  );
 }
 
 function resolveCrop(crop, image) {
-  if (crop && crop.aspect && isAspectInvalid(crop, image.naturalWidth, image.naturalHeight)) {
-    return makeAspectCrop(crop, image.naturalWidth / image.naturalHeight);
+  if (crop && crop.aspect && isAspectInvalid(crop, image)) {
+    return makeAspectCrop(crop, image);
   }
 
   return crop;
 }
 
-function getPixelCrop(image, percentCrop, useNaturalImageDimensions = true) {
-  if (!image || !percentCrop) {
-    return null;
-  }
-
-  const imageWidth = useNaturalImageDimensions ? image.naturalWidth : image.width;
-  const imageHeight = useNaturalImageDimensions ? image.naturalHeight : image.height;
-
-  const x = Math.round(imageWidth * (percentCrop.x / 100));
-  const y = Math.round(imageHeight * (percentCrop.y / 100));
-  const width = Math.round(imageWidth * (percentCrop.width / 100));
-  const height = Math.round(imageHeight * (percentCrop.height / 100));
-
-  return {
-    x,
-    y,
-    // Clamp width and height so rounding doesn't cause the crop to exceed bounds.
-    width: clamp(width, 0, imageWidth - x),
-    height: clamp(height, 0, imageHeight - y),
-  };
-}
-
-function containCrop(prevCrop, crop, imageAspect) {
+function containCrop(prevCrop, crop, image) {
   const contained = { ...crop };
 
   // Fixes issue where crop can be dragged to the left when resizing with SW ord
   // even though it's hit the bottom of the image.
-  if (crop.aspect && prevCrop.x > crop.x && (crop.height + crop.y) >= 100) {
+  if (crop.aspect && prevCrop.x > crop.x && (crop.height + crop.y) >= image.height) {
     contained.x = prevCrop.x;
   }
 
   // Don't let the crop grow on the opposite side when hitting an x image boundary.
   let cropXAdjusted = false;
-  if (contained.x + contained.width > 100) {
-    contained.width = crop.width + (100 - (crop.x + crop.width));
-    contained.x = crop.x + (100 - (crop.x + contained.width));
+  if (contained.x + contained.width > image.width) {
+    contained.width = crop.width + (image.width - (crop.x + crop.width));
+    contained.x = crop.x + (image.width - (crop.x + contained.width));
     cropXAdjusted = true;
   } else if (contained.x < 0) {
     contained.width = crop.x + crop.width;
@@ -154,7 +129,7 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   if (cropXAdjusted && crop.aspect) {
     // Adjust height to the resized width to maintain aspect.
-    contained.height = (contained.width / crop.aspect) * imageAspect;
+    contained.height = contained.width / crop.aspect;
     // If sizing in up direction we need to pin Y at the point it
     // would be at the boundary.
     if (prevCrop.y > contained.y) {
@@ -164,9 +139,9 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   // Don't let the crop grow on the opposite side when hitting a y image boundary.
   let cropYAdjusted = false;
-  if (contained.y + contained.height > 100) {
-    contained.height = crop.height + (100 - (crop.y + crop.height));
-    contained.y = crop.y + (100 - (crop.y + contained.height));
+  if (contained.y + contained.height > image.height) {
+    contained.height = crop.height + (image.height - (crop.y + crop.height));
+    contained.y = crop.y + (image.height - (crop.y + contained.height));
     cropYAdjusted = true;
   } else if (contained.y < 0) {
     contained.height = crop.y + crop.height;
@@ -176,7 +151,7 @@ function containCrop(prevCrop, crop, imageAspect) {
 
   if (cropYAdjusted && crop.aspect) {
     // Adjust width to the resized height to maintain aspect.
-    contained.width = (contained.height * crop.aspect) / imageAspect;
+    contained.width = contained.height * crop.aspect;
     // If sizing in up direction we need to pin X at the point it
     // would be at the boundary.
     if (contained.x < crop.x) {
@@ -280,7 +255,6 @@ class ReactCrop extends PureComponent {
       locked,
       keepSelection,
       onChange,
-      useNaturalImageDimensions,
     } = this.props;
 
     if (e.target !== this.imageRef) {
@@ -299,13 +273,13 @@ class ReactCrop extends PureComponent {
     this.componentRef.focus({ preventScroll: true });
 
     const imageOffset = this.getElementOffset(this.imageRef);
-    const xPc = ((clientPos.x - imageOffset.left) / this.imageRef.width) * 100;
-    const yPc = ((clientPos.y - imageOffset.top) / this.imageRef.height) * 100;
+    const x = clientPos.x - imageOffset.left;
+    const y = clientPos.y - imageOffset.top;
 
     const nextCrop = {
       aspect: crop ? crop.aspect : undefined,
-      x: xPc,
-      y: yPc,
+      x,
+      y,
       width: 0,
       height: 0,
     };
@@ -328,7 +302,7 @@ class ReactCrop extends PureComponent {
     };
 
     this.mouseDownOnCrop = true;
-    onChange(nextCrop, getPixelCrop(this.imageRef, nextCrop, useNaturalImageDimensions));
+    onChange(nextCrop);
     this.setState({ cropIsActive: true });
   }
 
@@ -349,6 +323,7 @@ class ReactCrop extends PureComponent {
     }
 
     e.preventDefault(); // Stop drag selection.
+
     if (!this.dragStarted) {
       this.dragStarted = true;
       onDragStart();
@@ -361,11 +336,8 @@ class ReactCrop extends PureComponent {
       clientPos.y = this.straightenYPath(clientPos.x);
     }
 
-    const xDiffPx = clientPos.x - evData.clientStartX;
-    evData.xDiffPc = (xDiffPx / this.imageRef.width) * 100;
-
-    const yDiffPx = clientPos.y - evData.clientStartY;
-    evData.yDiffPc = (yDiffPx / this.imageRef.height) * 100;
+    evData.xDiff = clientPos.x - evData.clientStartX;
+    evData.yDiff = clientPos.y - evData.clientStartY;
 
     let nextCrop;
 
@@ -376,7 +348,7 @@ class ReactCrop extends PureComponent {
     }
 
     if (nextCrop !== crop) {
-      onChange(nextCrop, getPixelCrop(this.imageRef, nextCrop));
+      onChange(nextCrop);
     }
   }
 
@@ -386,7 +358,6 @@ class ReactCrop extends PureComponent {
       disabled,
       onChange,
       onComplete,
-      useNaturalImageDimensions,
     } = this.props;
 
     if (disabled) {
@@ -418,11 +389,11 @@ class ReactCrop extends PureComponent {
 
     if (nudged) {
       e.preventDefault(); // Stop drag selection.
-      nextCrop.x = clamp(nextCrop.x, 0, 100 - nextCrop.width);
-      nextCrop.y = clamp(nextCrop.y, 0, 100 - nextCrop.height);
+      nextCrop.x = clamp(nextCrop.x, 0, this.imageRef.width - nextCrop.width);
+      nextCrop.y = clamp(nextCrop.y, 0, this.imageRef.height - nextCrop.height);
 
-      onChange(nextCrop, getPixelCrop(this.imageRef, nextCrop, useNaturalImageDimensions));
-      onComplete(nextCrop, getPixelCrop(this.imageRef, nextCrop, useNaturalImageDimensions));
+      onChange(nextCrop);
+      onComplete(nextCrop);
     }
   }
 
@@ -432,7 +403,6 @@ class ReactCrop extends PureComponent {
       disabled,
       onComplete,
       onDragEnd,
-      useNaturalImageDimensions,
     } = this.props;
 
     if (disabled) {
@@ -443,7 +413,7 @@ class ReactCrop extends PureComponent {
       this.mouseDownOnCrop = false;
       this.dragStarted = false;
       onDragEnd();
-      onComplete(crop, getPixelCrop(this.imageRef, crop, useNaturalImageDimensions));
+      onComplete(crop);
       this.setState({ cropIsActive: false });
     }
   }
@@ -454,18 +424,17 @@ class ReactCrop extends PureComponent {
       onComplete,
       onChange,
       onImageLoaded,
-      useNaturalImageDimensions,
     } = this.props;
 
     const resolvedCrop = resolveCrop(crop, image);
 
     // Return false from onImageLoaded if you set the crop with setState in there as otherwise the subsequent
     // onChange + onComplete will not have your updated crop.
-    const res = onImageLoaded(image, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
+    const res = onImageLoaded(image);
 
     if (res !== false && resolvedCrop !== crop) {
-      onChange(resolvedCrop, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
-      onComplete(resolvedCrop, getPixelCrop(image, resolvedCrop, useNaturalImageDimensions));
+      onChange(resolvedCrop);
+      onComplete(resolvedCrop);
     }
   }
 
@@ -485,10 +454,9 @@ class ReactCrop extends PureComponent {
   getCropStyle() {
     const { crop } = this.props;
     return {
-      top: `${crop.y}%`,
-      left: `${crop.x}%`,
-      width: `${crop.width}%`,
-      height: `${crop.height}%`,
+      transform: `translate(${crop.x}px, ${crop.y}px)`,
+      width: `${crop.width}px`,
+      height: `${crop.height}px`,
     };
   }
 
@@ -500,25 +468,24 @@ class ReactCrop extends PureComponent {
       minHeight,
       maxHeight,
     } = this.props;
-    const { evData } = this;
-    const imageAspect = this.imageRef.width / this.imageRef.height;
+    const { evData, imageRef } = this;
 
     // New width.
-    let newWidth = evData.cropStartWidth + evData.xDiffPc;
+    let newWidth = evData.cropStartWidth + evData.xDiff;
 
     if (evData.xCrossOver) {
       newWidth = Math.abs(newWidth);
     }
 
-    newWidth = clamp(newWidth, minWidth, maxWidth);
+    newWidth = clamp(newWidth, minWidth, maxWidth || imageRef.width);
 
     // New height.
     let newHeight;
 
     if (crop.aspect) {
-      newHeight = (newWidth / crop.aspect) * imageAspect;
+      newHeight = newWidth / crop.aspect;
     } else {
-      newHeight = evData.cropStartHeight + evData.yDiffPc;
+      newHeight = evData.cropStartHeight + evData.yDiff;
     }
 
     if (evData.yCrossOver) {
@@ -526,10 +493,10 @@ class ReactCrop extends PureComponent {
       newHeight = Math.min(Math.abs(newHeight), evData.cropStartY);
     }
 
-    newHeight = clamp(newHeight, minHeight, maxHeight);
+    newHeight = clamp(newHeight, minHeight, maxHeight || imageRef.height);
 
     if (crop.aspect) {
-      newWidth = clamp((newHeight * crop.aspect) / imageAspect, 0, 100);
+      newWidth = clamp(newHeight * crop.aspect, 0, this.imageRef.width);
     }
 
     return {
@@ -541,8 +508,8 @@ class ReactCrop extends PureComponent {
   dragCrop() {
     const nextCrop = this.makeNewCrop();
     const { evData } = this;
-    nextCrop.x = clamp(evData.cropStartX + evData.xDiffPc, 0, 100 - nextCrop.width);
-    nextCrop.y = clamp(evData.cropStartY + evData.yDiffPc, 0, 100 - nextCrop.height);
+    nextCrop.x = clamp(evData.cropStartX + evData.xDiff, 0, this.imageRef.width - nextCrop.width);
+    nextCrop.y = clamp(evData.cropStartY + evData.yDiff, 0, this.imageRef.height - nextCrop.height);
     return nextCrop;
   }
 
@@ -551,15 +518,14 @@ class ReactCrop extends PureComponent {
     const { evData } = this;
     const { crop, minWidth, minHeight } = this.props;
     const { ord } = evData;
-    const imageAspect = this.imageRef.width / this.imageRef.height;
 
     // On the inverse change the diff so it's the same and
     // the same algo applies.
     if (evData.xInversed) {
-      evData.xDiffPc -= evData.cropStartWidth * 2;
+      evData.xDiff -= evData.cropStartWidth * 2;
     }
     if (evData.yInversed) {
-      evData.yDiffPc -= evData.cropStartHeight * 2;
+      evData.yDiff -= evData.cropStartHeight * 2;
     }
 
     // New size.
@@ -591,7 +557,7 @@ class ReactCrop extends PureComponent {
       width: newSize.width,
       height: newSize.height,
       aspect: nextCrop.aspect,
-    }, imageAspect);
+    }, this.imageRef);
 
     // Apply x/y/width/height changes depending on ordinate (fixed aspect always applies both).
     if (nextCrop.aspect || ReactCrop.xyOrds.indexOf(ord) > -1) {
@@ -625,9 +591,7 @@ class ReactCrop extends PureComponent {
   straightenYPath(clientX) {
     const { evData } = this;
     const { ord } = evData;
-    const { cropOffset } = evData;
-    const cropStartWidth = (evData.cropStartWidth / 100) * this.imageRef.width;
-    const cropStartHeight = (evData.cropStartHeight / 100) * this.imageRef.height;
+    const { cropOffset, cropStartWidth, cropStartHeight } = evData;
     let k;
     let d;
 
@@ -687,13 +651,13 @@ class ReactCrop extends PureComponent {
   crossOverCheck() {
     const { evData } = this;
 
-    if ((!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiffPc >= 0) ||
-      (evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiffPc <= 0)) {
+    if ((!evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff >= 0) ||
+      (evData.xCrossOver && -Math.abs(evData.cropStartWidth) - evData.xDiff <= 0)) {
       evData.xCrossOver = !evData.xCrossOver;
     }
 
-    if ((!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiffPc >= 0) ||
-      (evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiffPc <= 0)) {
+    if ((!evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff >= 0) ||
+      (evData.yCrossOver && -Math.abs(evData.cropStartHeight) - evData.yDiff <= 0)) {
       evData.yCrossOver = !evData.yCrossOver;
     }
 
@@ -844,8 +808,8 @@ ReactCrop.defaultProps = {
   disabled: false,
   locked: false,
   imageAlt: '',
-  maxWidth: 100,
-  maxHeight: 100,
+  maxWidth: undefined,
+  maxHeight: undefined,
   minWidth: 0,
   minHeight: 0,
   keepSelection: false,
@@ -858,13 +822,11 @@ ReactCrop.defaultProps = {
   style: undefined,
   imageStyle: undefined,
   renderSelectionAddon: undefined,
-  useNaturalImageDimensions: true,
 };
 
 export {
   ReactCrop as default,
   ReactCrop as Component,
-  getPixelCrop,
   makeAspectCrop,
   containCrop,
 };
diff --git a/package-lock.json b/package-lock.json
index c8e0c17..19b5332 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5014,6 +5014,7 @@
     },
     "js-tokens": {
       "version": "3.0.1",
+      "resolved": false,
       "integrity": "sha1-COnxMkhKLEWjCQfp3E1VZ7fxFNc="
     },
     "js-yaml": {
@@ -5208,6 +5209,7 @@
     },
     "loose-envify": {
       "version": "1.3.1",
+      "resolved": false,
       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
       "requires": {
         "js-tokens": "^3.0.0"
diff --git a/package.json b/package.json
index 64e0aa6..e3d9697 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-image-crop",
-  "version": "6.0.18",
+  "version": "7.0.0",
   "description": "A responsive image cropping tool for React",
   "repository": "https://github.com/DominicTobias/react-image-crop",
   "main": "dist/ReactCrop.js",
@@ -9,9 +9,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack --progress --colors --watch --config demo/webpack.config.js & npm run sass-watch",
     "sass-watch": "node-sass lib/ReactCrop.scss dist/ReactCrop.css --watch",
-    "release-js": "cross-env NODE_ENV=production webpack",
-    "release-css": "node-sass lib/ReactCrop.scss dist/ReactCrop.css",
-    "release": "npm run release-js && npm run release-css"
+    "build:js": "cross-env NODE_ENV=production webpack",
+    "build:css": "node-sass lib/ReactCrop.scss dist/ReactCrop.css",
+    "build": "npm run build:js && npm run build:css"
   },
   "author": "Dominic Tobias <dominic.tobias@gmail.com>",
   "keywords": [
@@ -49,7 +49,6 @@
     "react": ">=15.2.2"
   },
   "dependencies": {
-    "@types/react-image-crop": "^6.0.1",
     "prop-types": ">=15.5.8"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 9d6ec28..0baff22 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,12 +18,6 @@ function getConfig(minified) {
         commonjs2: 'react',
         amd: 'react',
       },
-      'prop-types': {
-        root: 'PropTypes',
-        commonjs: 'prop-types',
-        commonjs2: 'prop-types',
-        amd: 'prop-types',
-      },
     },
     module: {
       loaders: [{