CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kārlis Janisels
Kārlis Janisels

Reputation: 1295

How to change image css after rotating it in JS?

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

Upvotes: 1

Views: 1239

Answers (3)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Tim Cosmo
Tim Cosmo

Reputation: 66

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

Upvotes: 1

Vassilis Pits
Vassilis Pits

Reputation: 3848

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.

Upvotes: 1

Related Questions