set width and height of an image after transform: rotate

Question

i have a div with width: 190px and height: 260px, i assign img tag on that div, when i upload an image that shows how the image before, after that i rotate the image but the width and height of the image didnt change like the div, i have used inherit, everything about position and display, but no good at all..

Answer 1

I have figured out an automated way as below:

First, I am getting natural height and width of the image (from onload trigger):

naturalWidth = event.currentTarget.naturalWidth
naturalHeight = event.currentTarget.naturalHeight

Then I am computing a transform scale using aspect-ratio and generating transform style as below (pseudo-code):

For 90deg (y-shift):

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const yshift = -100 * scale
  const style = "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;"

For 270deg (x-shift):

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const xshift = -100 * scale
  const style = "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;"

Hope this helps.

Answer 2

Hey,

Please Try this code.

var $=jQuery.noConflict();
$(document).ready(function(){
	$('#RotateButton').click(function(){
	   $('.col').toggleClass("afterRot");
	});
});
/* ----- IE Support CSS Script ----- */
var userAgent, ieReg, ie;
userAgent = window.navigator.userAgent;
ieReg = /msie|Trident.*rv[ :]*11\./gi;
ie = ieReg.test(userAgent);
if(ie) {
  $(".col").each(function () {
    var $container = $(this),
        imgUrl = $container.find("img").prop("src");
    if (imgUrl) {
      $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");
    }
  });
}

body { padding: 0; margin: 0; }
.col { position: relative; display: block; width:100vh; height: 100vh; }
.afterRot{ transform: rotate(90deg); object-fit: cover; }
.col img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;	object-fit: cover; }
.custom-object-fit { position: relative; background-size: cover; background-position: center center; }
.custom-object-fit img { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mob">
	<button type="button" id="RotateButton"> Rotate </button>
	<div class="col">     
    	<img class="nor" id="rowImg" src="https://cdn-images-1.medium.com/max/1600/1*tSyuv3ZRCfsSD5aXB7v8DQ.png">
    </div>
</div>

Answer 3

Inherit will not work. Because you have to make the set the width of your image as the height of your parent. Then it will get completely resize in the parent element.

image-width = parent-height

Because after applying transform property width and height property will also get rotate in its respect.

Sol 1: change the width of your image along with the transform property. (If it is variable then you can use the SCSS variables to assign the same values to the image-width and parent height.)

Sol 2: This is not the perfect solution but will work in many cases. Add scale property to your transform property like this

transform: rotate(90deg) scale(.7);

Adjust the scale values according to you.