Use correct aspect ratio when zooming in/out of picture.

static/js/directives/buddypictureupload.js

@@ -23,6 +23,16 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 	// buddyPictureUpload
 	return ["$compile", function($compile) {
 
+		var getNumFromPx = function(px) {
+			var num = px.match(/[\-0-9]+/);
+			if (num) {
+				num = Number(num[0]);
+			} else {
+				num = 0;
+			}
+			return num;
+		};
+
 		var controller = ['$scope', 'safeApply', '$timeout', '$q', 'translation', function($scope, safeApply, $timeout, $q, translation) {
 
 			var previewWidth = 205;
@@ -40,6 +50,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			$scope.upload = {
 				status: 0
 			};
+			$scope.aspectRatio = 1;
 
 			var completedUpload = function() {
 				$scope.upload.status = 100;
@@ -49,6 +60,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				$scope.prevImage.onload = function() {
 					// clear old dimensions
 					this.style.cssText = null;
+					$scope.aspectRatio = this.width/this.height;
 					// get new dimensions
 					var dim = getAutoFitDimensions(this, {width: previewWidth, height: previewHeight});
 					this.style.width = dim.width + 'px';
@@ -61,10 +73,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				$scope.prevImage.src = data;
 			};
 
-			var getNumFromPx = function(px) {
-				return px.match(/[\-0-9]+/) ? Number(px.match(/[\-0-9]+/)[0]) : 0;
-			};
-
 			// Auto fit by smallest dimension
 			var getAutoFitDimensions = function(from, to) {
 				if (!from.width && !from.height && !to.width && !to.height) {
@@ -148,7 +156,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 					//console.log('file progress', event);
 					var percentComplete = event.loaded/event.total * 100;
 					// show complete only when src is loaded in image element
-					if(percentComplete != 100) {
+					if (percentComplete !== 100) {
 						$scope.$apply(function(scope) {
 							$scope.upload.status = percentComplete;
 						});
@@ -212,17 +220,21 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			};
 			var pxDefaultMovementSpeed = 5;
 
+			// Return the correct image height based on changes to the image width.
+			var calcHeight = function(width) {
+				return (getNumFromPx(width) / $scope.aspectRatio) + 'px';
+			};
 			var incrementPx = function(num, pxToMove) {
-				if(pxToMove === undefined) {
+				if (pxToMove === undefined) {
 					pxToMove = pxDefaultMovementSpeed;
 				}
-				return ((Number(num.match(/[\-0-9]+/)) + pxToMove) + 'px');
+				return (getNumFromPx(num) + pxToMove) + 'px';
 			};
 			var decrementPx = function(num, pxToMove) {
-				if(pxToMove === undefined) {
+				if (pxToMove === undefined) {
 					pxToMove = pxDefaultMovementSpeed;
 				}
-				return ((Number(num.match(/[\-0-9]+/)) - pxToMove) + 'px');
+				return (getNumFromPx(num) - pxToMove) + 'px';
 			};
 			var moveImageUp = function(pxMove) {
 				$scope.prevImage.style.top = decrementPx($scope.prevImage.style.top, pxMove);
@@ -237,15 +249,15 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				$scope.prevImage.style.left = incrementPx($scope.prevImage.style.left, pxMove);
 			};
 			var makeImageLarger = function() {
-				$scope.prevImage.style.height = incrementPx($scope.prevImage.style.height);
-				moveImageLeft(1);
 				$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
+				$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
+				moveImageLeft(1);
 				moveImageUp(2);
 			};
 			var makeImageSmaller = function() {
-				$scope.prevImage.style.height = decrementPx($scope.prevImage.style.height);
-				moveImageRight(1);
 				$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
+				$scope.prevImage.style.height = calcHeight($scope.prevImage.style.width);
+				moveImageRight(1);
 				moveImageDown(2);
 			};
 			var changeImage = function(evt) {