как расположить / изменить размер изображения после поворота с помощью css / js, чтобы изображение не располагалось вне div, удерживая его или обрезалось

Question

как расположить / изменить размер изображения после поворота с помощью css / js, чтобы изображение не располагалось вне div, удерживая его или обрезалось

0

Здесь jsfiddle, над которым я работаю.

Jsfiddle поворачивает изображение при нажатии кнопки на 90 градусов по часовой стрелке или против часовой стрелки. Повернутое изображение отображается за пределами родительского div при повороте. Изображение может иметь любую высоту и ширину.

Как можно изменить поворот, чтобы отобразить изображение в его родительском div, поддерживая его соотношение сторон?

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>

Rikesh Bhansari 18 апр. 2016, в 20:27

Источник

Теги:

html

angularjs

css

rotation

1 ответ

Ещё вопросы

Vincent G · Accepted Answer · 2016-04-18T16-50-00.000Z

Вы можете добавить свойство margin-top CSS, чтобы сделать это следующим образом:

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

И если вы хотите, чтобы палочка изображения была сверху, когда она не вращается, вы можете добавить это условие:

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

См. Результат здесь

Примечание. Если вы удалите это последнее условие, оно идеально подойдет к границе.