CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan
Dan

Reputation: 517

fit rotated image in container jQuery css

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 90degrees or 270 degrees it doesn't fit with the main container...

I want it to fit with the container once its rotated 90/270 degrees.

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

Upvotes: 2

Views: 1037

Answers (1)

Taki
Taki

Reputation: 17654

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

Upvotes: 5

Related Questions