Javascript 图像旋转：调整宽度和高度

我为此四处窥探了一下。有一些解决方案，但我无法正确理解。我试图实现旋转矩阵，但我做不到。我已经创建了一个简单的小提琴，点击图像旋转90度（不包括我的实现，因为我不知道如何做）。下面是简单的代码。有人能指导我或帮助我执行旋转吗。我想要的是一开始你有一定的宽度和高度。旋转90度时，宽度变为高度，高度变为宽度，因此图像保持在div内

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

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

CSS

HTML

点击

唯一的问题是，如果增加或减少js和result之间的分隔符（或减小页面大小），图像将从div框中显示出来。即使在旋转后，图像也应根据div box的增加/减少来匹配该框。就像它在正常情况下的样子。希望这是有意义的你找到解决这个问题的方法了吗？

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

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

.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;
}

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