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

Question

我开发了这个脚本，用按钮点击旋转图像......

问题

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

我希望它在旋转90/270度后适合容器。

＆＃13;

＆＃13;

$(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)'
    });
  })
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>