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


Tags: html,css,angularjs,rotation

Problem :

Here's a jsfiddle i'm working on.

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.

How can the rotation be modified to display the image within its parent div maintaining its aspect ratio?

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 < 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
        });
      });
    }
  }
});
img {
  border: green solid 1px;
}
.container {
  margin-top: 100px;
}
.img-holder {
  border: red solid 1px;
  height: 500px;
  width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app='rotationApp' ng-controller="rotationCtrl">
  <div class="container">
    <div class="row">
      <div class="col-md-6 img-holder">
        <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">
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-lg btn-primary" ng-click="rotate(-90)">
          rotate left
        </button>
        <button type="button" class="btn btn-lg btn-primary" ng-click="rotate(90)">
          rotate right
        </button>
      </div>
    </div>
  </div>
</div>



Solution :

You can add a CSS margin-top property to do this like this :

        var r = 'rotate(' + rotateDegrees + 'deg)';
        element.css({
            '-moz-transform': r,
            '-webkit-transform': r,
            '-o-transform': r,
            '-ms-transform': r,
            transform: r,
            'margin-top' : '100px'
        });

And if you want to keep the image stick to the top when it is not rotate, you can add this condition :

        if(r == "rotate(0deg)" || r == "rotate(180deg)"){
            element.css('margin-top',0);
        }

See the result here

Note : If you remove that last condition, it is perfectly centered to the border.


    CSS Howto..

    How to load one image and use it twice using HTML&CSS? No JS

    how to select last element in the page?

    how to align editor-label with editor-field in css

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    How to change column display order mobile/tablet view CSS Wordpress?

    how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?

    How to use the not selector correctly in CSS [duplicate]

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    CSS: How to make an input box stretch to the width of its given absolute position left and right value?

    How to CSS select each first div without class after div with class?

    How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How can i use “z-index” as an css attribute selector?

    How to show only half of bootstrap glyphicon with css

    How to transition overlay menu on clicking button

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    javafx ImageView how to use css hover

    CSS Specificity - how to overlap twitter-bootstrap

    Using vi, how can I remove all lines that contain [searchterm]?

    How to locate a pointed div element in css

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to hide desktop css from iphone browser?

    html-css-how to make opeanable vertical menu [closed]

    How to use -webkit-appearance: searchfield-results-decoration?

    How to test a web designer on css layouts?

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    How to align p tag side by side using css?

    how do you center columns/rows

    Linkedin Follow Button not showing properly in Firefox