Rotate image and resize to fit

Asked

Viewed 53 times

0

I have the following script

var graus = 0;
$(document).on('click','img',function(){
  graus = (graus+90);
  if(graus>350) graus = 0
  $(this).css({
    "-webkit-transform": "rotate("+graus+"deg)",
    "-moz-transform": "rotate("+graus+"deg)",
    "transform": "rotate("+graus+"deg)"
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/200x100.png?text=imagem">

Rotate the image already I can.
But you can see that on the first turn, the top of the image cuts.

I’d like it in a way that when you spin it fits and doesn’t cut anything.

I tried with CSS but without success, some suggestion ?

jquery css

  • It’s not gonna work with Transform. Because Transform only changes the part of Composite, what I mean is that it doesn’t change the page rendering to rearrange the elements on the screen by alternating by adjusting margins, positions etc. what is happening is that the image is only rotating visually in the center of the axis itself. it is moving only "virtually" on the screen without interfering with the elements that are next to or in the space itself that the element originally occupies.

1 answer

0


I found two interesting answers on this topic:
https://stackoverflow.com/questions/18531698/css-rotate-image-and-align-top-left

function rotateImage(elm, deg) {
    $(elm).css('margin-left', 0).css('margin-top', 0);
    $(elm).css('transform', 'rotate(' + deg + 'deg)');
    // Get the container offset
    var offsetContLeft = $(elm).parent().offset().left;
    var offsetContTop = $(elm).parent().offset().top;
    // get the new rotated offset
    var offsetLeft = $(elm).offset().left;
    var offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
    var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
    $("#a").text(newOffsetX + "-" + newOffsetY)
    // Apply the new offsets to the margin of the element.
      $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
          .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

Fiddle

And this too:

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}
<div style="border: 1px solid red;">
  <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.