0
Hier ist ein jsfiddle ich arbeite an.wie man das Bild nach der Rotation mit css/js positioniert/skaliert, so dass das Bild nicht außerhalb des div positioniert wird oder abgeschnitten
Die jsfiddle dreht ein Bild beim Klicken um 90 Grad im oder gegen den Uhrzeigersinn. Das gedrehte Bild wird außerhalb des übergeordneten Elements angezeigt, wenn es gedreht wird. Das Bild kann von beliebiger Höhe und Breite sein.
Wie kann die Drehung geändert werden, um das Bild innerhalb des übergeordneten div anzuzeigen, wobei das Seitenverhältnis beibehalten wird?
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>