rotate img inside Panel mit CSS und bekomme das Panel, um seine Höhe zu aktualisieren

Question

Ich habe die folgende HTML, die ein IMG in einem Bootstrap 3 Panel Körper anzeigt.

Ich musste das Bild -90 Grad drehen, und ich habe die Antworten auf diese Frage verwendet: CSS: rotate image and align top left in der Lage, das gedrehte Bild an der Spitze des Feldes auszurichten.

Beachten Sie, dass das Bild ein langes Rechteck und kein Quadrat ist, sodass eine 90-Grad-Drehung die Breite/Höhe stark ändert.

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

Nun ist mein Problem, dass das Bild über den Boden dieser Platte gezogen wird, wie es scheint, dass die Platte nicht der transformierten vertikalen Größe des Bildes „informiert“ wird.

Ich bin auf der Suche nach Möglichkeiten, die Höhe des Panels dynamisch anzupassen, weil ich eine Schaltfläche habe, mit der der Benutzer die Bilder je nach Bedarf um 90/180/270 ° drehen kann. (Im Moment habe ich die Rotation als CSS-Klasse fest programmiert ...)

danke!

Answer 1

Es gibt also eine Menge Code hier, weil dies eine ziemlich langwierige Transformation ist. Der Code und die Stile würden leicht mit einem Bild unterschiedlicher Größe geändert werden, aber Sie werden den Punkt bekommen.

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

    } 
} 

Ihre CSS ist die gleiche Syntax, aber unterschiedliche Werte für jede Drehung.

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

Kommentar, wenn Sie Fragen haben.