使用 CSS 旋转面板内的图像并让面板更新其高度

Question

我有以下 html，它在 bootstrap 3 面板主体内显示一个 img。

我需要将图像旋转 -90 度，我使用了这个问题的答案：CSS: rotate image and align top left 以便能够将旋转后的图像与面板顶部对齐。

请注意，图像是长矩形而不是正方形，因此旋转 90 度会极大地改变宽度/高度。

<div class="panel-body">
    <div id="media_content">
        <img class="img-responsive rotate270" src="dessin-3.jpg">
    </div>
</div>

    .rotate270 {
        -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
        -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
        -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
        -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
        transform: translateX(-100%) rotate(-90deg); /* W3C */  
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;        
    }

现在，我的问题是图像被绘制在该面板的底部，因为该面板似乎没有“通知”图像的转换垂直尺寸。

我正在寻找让面板动态调整其高度的方法，因为我将有一个按钮，可以让用户根据需要将图像旋转 90/180/270°。 （现在我将旋转硬编码为 CSS 类...）

谢谢！

Answer 1

所以这里有很多代码，因为这是一个相当繁琐的转换。代码和样式会用不同大小的图像稍微改变，但你会明白的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id="box" style="border: 2px solid red;">

<img id="img1" src="https://placehold.it/350x150">

</div>

<input id="button" type="button" value="Rotate 90 deg">

---

$(document).ready(function() {
    $("#box").height($("#img1").height());
    $("#box").width($("#img1").width());
    var rotation = 0;
    function turn(deg) {
        // Img height and width
        var imgH = $("img").height();
        var imgW = $("img").width();

        console.log(imgH + " " + imgW);

        // Div
        $box = $("#box");
        // Img
        $img = $("#img1");

        // Make deg less than 360
        while(deg >= 360) {
            deg -= 360;
        }

        console.log(deg);

        // Check deg, adust height and width
        if(deg == 90) {
            $img.addClass("rotate90");
            $img.removeClass("rotate2700");
            $img.removeClass("rotate180");
            $img.removeClass("rotate0");
            $box.height(imgW);
            $box.width(imgH);
        } else if .......

    }
}

您的 CSS 语法相同，但每次旋转的值不同。

JSFiddle：https://jsfiddle.net/a11sters/1/

如果您有任何问题，请发表评论。