如何在JS中旋转后更改图像css？

Question

There is nice css trick to always position image in the center of div regardless of image size or aspect ratio.

<style>
.img_wrap {
    padding-bottom: 56.25%;
    width: 100%; 
    position: relative;
    overflow: hidden;
}
#imgpreview {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</style>
<div class="img_wrap">
  <img id="imgpreview" src="http://i.imgur.com/RRUe0Mo.png" alt="your image" />
</div>

Then I added jquery code for rotating image

$(document).ready(function(){
    var rotation = 0;

    jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     'transform' : 'rotate('+ degrees +'deg)'});
    };

    $('#imgpreview').click(function() {
        rotation += 90;
        $(this).rotate(rotation);
        // $(this).toggleClass("imgpreview");
    });
});

However, when I am rotation image, it gets cropped. I want to avoid that.

I tried to play with addClass feature but with no success. If someone could suggest any solution would appreciate a lot.

I have created jsfidlle for this question. Here the updated fiddle

Answer 1

You can achieve this with jquery by altering a little bit your code:

$('#imgpreview').click(function() {
    if (rotation === 360) {
        rotation = 0
    } else {
        rotation += 90;
    }
    $(this).rotate(rotation);
    if(rotation === 90 || rotation === 270) {
        $('.img_wrap').css('height', $(this).width());
    } else {
        $('.img_wrap').css('height', 'auto');
    }
});

There's maybe the need to alter your css also but it depends what is the end result that you wish to have.

Answer 2

There are many ways to do that.
The jQuery below is determine whether it is vertical or not.
You just need to add this line into your function(degrees)

((degrees/90) == 1 || (degrees/90) == 3)? $(this).css('width','56.25%'):$(this).css('width','auto');

Jsfiddle

Answer 3

So this is what I did to your code:

1. Removed the overflow: hidden for img_wrap .

2. In JS I did this:

     $('.imgpreview').click(function() { rotation += 90; rotation %= 360; $(this).rotate(rotation); // when rotation is 90 or 270 if ((rotation / 90) & 1) { $(this).css({ 'width': $('.img_wrap').innerHeight(), 'max-height': $('.img_wrap').innerWidth() }); } else { $(this).css({ 'width': 'auto', 'max-height': '100%' }); } }); 

3. Note that the width / height calculations are done after the call to rotate function. After rotation, width is height and vice-versa for the imgpreview and so we have to allow height to adjust while setting width of imgpreview - hence the max-height style adjustment.

See demo below:

 $(document).ready(function() { var rotation = 0; jQuery.fn.rotate = function(degrees) { $(this).css({ '-webkit-transform': 'rotate(' + degrees + 'deg)', '-moz-transform': 'rotate(' + degrees + 'deg)', '-ms-transform': 'rotate(' + degrees + 'deg)', 'transform': 'rotate(' + degrees + 'deg)' }); }; $('.imgpreview').click(function() { rotation += 90; rotation %= 360; $(this).rotate(rotation); // when rotation is 90 or 270 if ((rotation / 90) & 1) { $(this).css({ 'width': $('.img_wrap').innerHeight(), 'max-height': $('.img_wrap').innerWidth() }); } else { $(this).css({ 'width': 'auto', 'max-height': '100%' }); } }); }); 

 body { margin: 0; } .img_wrap { width: 100%; position: relative; border: 3px solid black; padding-bottom: 56.25%; /*overflow: hidden;*/ } .imgpreview { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="img_wrap" id="P"> <img class="imgpreview" id="Pim" src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="your image" /> </div> <br/> <div class="img_wrap"> <img class="imgpreview" src="http://i.imgur.com/RRUe0Mo.png" alt="your image" /> </div>