javascript - 图像旋转 : adjusting width and height

Question

我为此做了一些窥探。有一些解决方案，但我无法正确理解它们。我试图实现旋转矩阵，但我做不到。我创建了一个简单的 fiddle ，点击图像旋转 90 度(不包括我的实现，因为我不明白如何去做)。下面是那个简单的代码。有人可以指导我或帮助我实现轮换。我想要的是最初你有一定的宽度和高度。当旋转 90 度时，宽度变为高度，高度变为宽度，因此图像保留在 div 内。

fiddle link

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

js

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

正如您在点击后在 fiddle 中看到的那样，图像会旋转 90 度。但是如果你增加/减少结果和 javascript 部分之间的分隔符，图像会变大或变小。我希望图像保留在 div 框内，并根据 div 框的宽度变小。

希望这不会让任何人感到困惑。需要旋转图像(正常，90,180,270，恢复正常)

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>