Rotate image and adjust size of div new image rotate

I try rotate horizontal image and show in vertical but i want do this, the size of div don?t change when rotate image inside

This it?s my code :

https://jsfiddle.net/3b9yhdj6/2/

SIMPLE CSS FOR CONTAINER IMAGE

#content
{
float:left;
position:relative;
min-width:10%;
max-height:350px;
border:1px solid;
overflow:hidden;
}


</style>

LITTLE JQUERY CODE

<script>
function rotation()
{

var w=jQuery(".image_rotate").height();
var h=jQuery(".image_rotate").width();

jQuery('#content').css("width",""+h+"px");
jQuery('#content').css("height",""+w+"px");

jQuery('.image_rotate').css({"transform": "rotate(90deg)"});

}
</script>

HTML CODE

<div id="content">
<img src="http://www.cuantos.net/wp-content/uploads/Cuantos-ejes-de-simetria-tiene-un-rectangulo1.png" class="image_rotate" />
</div>

<div onclick="rotation();">Rotate Now</div>

My problem it?s , never get the div container , adjust the size when rotate image , i try all but never get this finally , i try put example for test

Thank?s , regards

Answers 1

  • First, you've switched h and w twice. h should be height and w, width.

    Then, it's best to use transform-origin:0 0; to know you're rotating around the upper left corner. Then you'll need to offset the object by 100% to the right using margin-left: 100%

    Here's a demo

    function rotation()
    {
    var h = jQuery(".image_rotate").height();
    var w = jQuery(".image_rotate").width();
    
    jQuery('#content').css("width",h+"px");
    jQuery('#content').css("height",w+"px");
    
    jQuery('.image_rotate').css({"transform": "rotate(90deg)", "margin-left":"100%"});
    }
    

Related Articles