Question

我尝试旋转水平图像并在垂直方向显示但是我想这样做，当旋转图像时div的大小不会改变

这是我的代码：

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>

我的问题是，从来没有得到div容器，在旋转图像时调整大小，我尝试了所有但是从来没有得到这个，我试着把示例进行测试

谢谢，问候

Answer 1

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

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

将对象向右偏移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%"});
}

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

1 个答案:

Here's a demo