2

I have the following html that displays an img inside a bootstrap 3 panel body.

I needed to rotate the image -90 degrees, and I used the answers to this question : CSS: rotate image and align top left to be able to align the rotated image to the top of the panel.

Note that the image is a long rectangle and not a square, so a 90 degree rotation will greatly change width/height.

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

Now, my problem is that the image is drawn over the bottom of that panel, as it seems that the panel is not "informed" of the transformed vertical size of the image.

I'm looking for ways to have the panel adjust its height dynamically, because I'll have a button that lets the user rotate the images 90/180/270° as needed. (Right now I hardcoded the rotation as a CSS class...)

thanks !

Community
  • 1
  • 1
Nico...
  • 21
  • 5

1 Answers1

0

So there is a lot of code here, because this is a fairly tedious transformation. The code and styles would be slightly altered with a different size image, but you will get the point.

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

    }
}

Your CSS is the same syntax but different values for each rotation.

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

Comment if you have any questions.

theblindprophet
  • 7,767
  • 5
  • 37
  • 55
  • Ok, I checked the fiddle and it works as I need it too. If I understand your code right, you update the box's dimensions by hand then. I'll try that on my code and tell you :) thanks a lot ! So just to expand my knowledge, CSS give us tools to rotate etc, but the new dimensions aren't taken into account by the elements themselves ? – Nico... Apr 17 '16 at 18:59
  • Not that I know of by CSS. The div does not recognize the orientation change. All it knows is that the height and width of the image are the same even though its angled differently. – theblindprophet Apr 17 '16 at 19:02
  • I am unaware of a CSS solution and I researched you problem and found no solutions via CSS, only via JS. Therefore my solution to you is JS. – theblindprophet Apr 17 '16 at 19:29
  • No problem, if it worked please rate as best answer so others see that a solution as been found. Happy coding – theblindprophet Apr 17 '16 at 23:04