fit rotated image in container jQuery css

Question

I developed this script to rotate an image with button clicking...

PROBLEM

It rotates well, but the problem is that once the image is rotated 9

Answer 1

use scale to scale down the image when rotated and degrees % 180 to know the orientation of the image to scale it back

$(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 */
}

  
Rotate