Question

我为此做了一些窥探。有一些解决方案，但我无法正确理解它们。我试图实现旋转矩阵，但我不能这样做。我创建了一个简单的小提琴，点击图像旋转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):}

正如您在单击时可以看到的那样，图像变为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>

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

1 个答案: