javascript - 适合容器中的旋转图像 jQuery css

Question

我开发了这个脚本来通过单击按钮来旋转图像...

问题

它旋转得很好，但问题是一旦图像旋转 90 度或 270 度，它就不再适合主容器......

我希望它在旋转 90/270 度后能够与容器配合。

$(document).ready(function() {
  var degrees = 0;
  $("button").click(function rotateMe(e) {
    degrees += 90;
    //$('.img').addClass('rotated'); // for one time rotation
    $(".content").css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    });
  })
});

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.img {
  transition: all 0.5s ease;
}

.container {
  border: 1px solid blue;
  display: inline-block;
  width: 300px;
  margin: 0 auto;
}

div {
  border: 1px solid blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <button>
Rotate
</button>
  <div class="content">
    <img class="img" src="http://projectpuffin.audubon.org/sites/g/files/amh646/f/styles/hero_mobile/public/atpu-scholtz.jpg" />
  </div>
</div>

Answer 1

使用scale在旋转时缩小图像，并使用 Degrees % 180了解图像的方向以缩小图像

$(document).ready(function() {
  var degrees = 0;
  $("button").click(function rotateMe(e) {
    degrees += 90;
    if (degrees % 180 == 0) 
      $(".content").css({
        'transform': 'rotate(' + degrees + 'deg) scale(1)'
      });
    else
      $(".content").css({
        'transform': 'rotate(' + degrees + 'deg) scale(0.8)'
      });
  })
});

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.img {
  transition: all 0.5s ease;
}

.container {
  border: 1px solid blue;
  display: inline-block;
  width: 300px;
  margin: 0 auto;
  text-align: center; /* added */
}

div {
  border: 1px solid blue;
  display: inline-block;
  transition: all .5s linear; /* added */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <button>
Rotate
</button>
  <div class="content">

    <img class="img" src="http://projectpuffin.audubon.org/sites/g/files/amh646/f/styles/hero_mobile/public/atpu-scholtz.jpg" />
  </div>
</div>