适合容器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 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>

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

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