适合容器jQuery CSS中的旋转图像 [英] fit rotated image in container jQuery css

问题描述

我开发了此脚本来通过单击按钮来旋转图像...

I developed this script to rotate an image with button clicking...

问题

它旋转得很好，但是问题在于，一旦将图像旋转90度或270度，它就不适合主容器...

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

我希望它一旦旋转90/270度即可与容器配合.

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>

推荐答案

在旋转时使用scale缩小图像，并degrees % 180知道图像的方向以缩小图像

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>

这篇关于适合容器jQuery CSS中的旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！