CODEWITHSUNDEEP
csshtml
user6496921
user6496921

Reputation:

set width and height of an image after transform: rotate

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..state after upload the error thing

Upvotes: 10

Views: 17329

Answers (4)

donlys
donlys

Reputation: 450

I have figured out an automated way as below:

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

var naturalWidth = event.currentTarget.naturalWidth
var 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.

Upvotes: 8

Rajat Jain
Rajat Jain

Reputation: 1415

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.

Upvotes: 4

Dhaval Patel
Dhaval Patel

Reputation: 90

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>

Upvotes: 1

Bhaskar
Bhaskar

Reputation: 1938

I think this is because you are not removing the class already associated with the Image. Try adding this to your button

$(document).ready(function(){
$('#RotateButton').click(function(){
   $('#rowImg').removeClass("normalx").addClass("afterRot");
});
});

for a css like

.col {
  width:260px;
  height:190px:
  border: solid 1px #6c757d;
  padding: 10px;
}
.nor{
  width:250px;
  height:150px;
}
.afterRot{
  width:inherit;
  transform: rotate(90deg);
}

I have a sample here

Upvotes: 0

Related Questions