图像旋转:调整宽度和高度

Question

我对此进行了一些窥探。有一些解决方案，但我无法正确理解。我试着实现旋转矩阵，但我做不到。我创建了一个简单的fiddle，点击图像旋转90度（不包括我的实现，因为我不知道如何实现）。下面是那个简单的代码。有人能指导我或帮助我实施轮换吗。我想要的是最初你有一定的宽度和高度。当旋转90度时，宽度变为高度，高度变为宽度，因此图像保持在分区内

小提琴链接

<div><img id="rotate-image"></div> 
<span onClick="myFunction()">click<span>

js

function myFunction(){
$("#rotate-image").css("transform", "rotate(90deg):}

正如您在fiddle中看到的那样，单击后，图像将旋转90度。但是，如果增加/减少result和javascript部分之间的分隔符，则图像会变得越来越大。我希望图像保持在div框中，并根据div框的宽度变小。

希望这不会让任何人感到困惑。需要旋转图像（正常，90180270，恢复正常）

Answer 1

http://jsfiddle.net/72nptzq5/6/

CSS

.parent{
    width: 70%;
    height:300px;
    border:1px solid black;
    text-align: center;
}
#rotate-image{
    max-width:100%;
    display: inline-block;
}
.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}

HTML

<div class="parent">
    <div class="table">
        <div class="table-cell">
            <img id="rotate-image" src="https://cdn.tutsplus.com/net/uploads/legacy/254_apps/images/200x200.png" />
        </div>
    </div>
</div>
<span onclick="myFunction()">click</span>