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

Question

有一个很好的 css 技巧，无论图像大小或纵横比如何，始终将图像定位在 div 的中心。

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

然后我添加了用于旋转图像的 jquery 代码

$(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");
    });
});

但是，当我旋转图像时，它会被裁剪。我想避免这种情况。

我尝试使用 addClass 功能但没有成功。如果有人可以提出任何解决方案，将不胜感激。

我创建了 jsfidlle对于这个问题。这里是updated fiddle

Answer 1

这就是我对您的代码所做的:

1. 为 img_wrap 移除了 overflow: hidden。

2. 在 JS 中我这样做了:

     $('.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. 请注意，width/height 计算是在调用 rotate 函数之后完成的。 旋转后，宽度为高度，对于imgpreview，反之亦然，因此我们必须允许高度 > 在设置 imgpreview 的 width 时进行调整 - 因此 max-height 样式调整。

请看下面的演示:

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