title: how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out
body: <p>Here's a <strong><a href="https://jsfiddle.net/1akhx4yu/" rel="nofollow">jsfiddle</a></strong> i'm working on.</p>
  
  <p>The jsfiddle rotates an image upon button click by 90 degrees in clockwise or anti-clockwise direction. The rotated image is displayed outside the parent div when rotated.
  The image may be of any height and width.</p>
  
  <p>How can the rotation be modified to display the image within its parent div maintaining its aspect ratio?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('rotationApp', []);
  
  app.controller('rotationCtrl', ['$scope',
    function($scope) {
      $scope.angle = 0;
      $scope.rotate = function(angle) {
        $scope.angle += angle;
        if (($scope.angle === 360)) {
          $scope.angle = 0;
        }
        if ($scope.angle &lt; 0) {
          $scope.angle += 360;
        }
      }
    }
  ]);
  
  app.directive('rotate', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.$watch(attrs.degrees, function(rotateDegrees) {
          var r = 'rotate(' + rotateDegrees + 'deg)';
          element.css({
            '-moz-transform': r,
            '-webkit-transform': r,
            '-o-transform': r,
            '-ms-transform': r,
            transform: r
          });
        });
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    border: green solid 1px;
  }
  .container {
    margin-top: 100px;
  }
  .img-holder {
    border: red solid 1px;
    height: 500px;
    width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app='rotationApp' ng-controller="rotationCtrl"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6 img-holder"&gt;
          &lt;img rotate degrees='angle' class="img-responsive" src="http://vignette1.wikia.nocookie.net/uncyclopedia/images/3/3a/Pac_man_pie_chart.jpg/revision/latest?cb=20100508212204"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6"&gt;
          &lt;button type="button" class="btn btn-lg btn-primary" ng-click="rotate(-90)"&gt;
            rotate left
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-lg btn-primary" ng-click="rotate(90)"&gt;
            rotate right
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>