How to change image css after rotating it in JS?


Tags: javascript,jquery,html,css

Problem :

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



Solution :

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>


    CSS Howto..

    How to adjust the size of background image with browsers window using media queries

    how to align elements using css in angular typeahead

    how to implement list bullets in CSS [closed]

    How do I make my CSS link up to files in different directories

    Angular show / hide with animation

    How to slowly move header while user scrolls the page?

    How can I get the font size of an element as it was set by css

    How to do aspect to fill in img tag?

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    How to set CSS3 transition using javascript?

    How to select col id using jquery to hide via css

    css menu active sub links to show on parent link

    How to stop this parent element from being affected on hover?

    How to make changes in wordpress template. Css direct edit not working

    How to add class based on which css class name is come in jquery

    How do you avoid class name collisions? [closed]

    css - how to get (responsive) li's with the same height when they have a different width?

    How to make CSS border show on radio button click

    How do I get these boxes to align in either jquery or css

    How to build some basic tiles with Title and Description?

    How to make a key shape using css?

    How can I pull Data from an SQL table using PHP inside an HTML

    How to override w3.css for table border

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to remove the default active tab color when another tab is active using jquery

    How can I fix left menu in bootstrap 3.0? [closed]

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    CSS - How to select nth-child of form element?

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    How do I change the :-moz-placeholder color with jQuery once it's set?