旋转图像并调整DIV新图像的大小旋转

Question

我尝试旋转水平图像并在垂直方向上显示，但我想这样做，当旋转图像

旋转时，div的大小不会变化

这是我的代码：

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

简单的容器图像

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

</style>

小jQuery代码

<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代码

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

我的问题是，永远不要得到Div容器，调整旋转图像时的尺寸，我尝试了全部，但最终从未得到这个，我尝试为测试示例

谢谢，

Answer 1

首先，您已经切换了h和w两次。h应为高度和w，宽度。

然后，最好使用transform-origin:0 0;知道您在左上角旋转。然后，您需要使用margin-left: 100%

将对象在右边100％取代对象

这是一个演示

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%"});
}