höhe anpassen nach Rotate

baeri

Erfahrenes Mitglied
Hallo,
ich habe ein Bild das wurde im Body mit max-height: 100% und max-width: 100% angepasst...

wenn ich das jetzt mit:
Code:
            .rotate {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);

drehe, passt die höhe nicht mehr...

wie kann ich die höhe anpassen? eine height oder width in meiner klasse angeben hat nichts geholfen :(
 
Zuletzt bearbeitet:
evtl. hätte ich dazu schreiben sollen, dass das bild im "nachhinein" rotiert wird, da Javascript erst wissen muss OB das bild rotiert werden soll.

http://codepen.io/anon/pen/qbwewg
=> hier kann man gut sehen, dass der body eigentlich kleiner als das "dann rotierte bild" ist...
 
ja... das war ja auch absicht, weil bei codepen das irgendwie komisch angezeigt wird, bei mir ist der body auf 100%...

allerdings wird bei mir nach der Rotation trotzdem oben und unten etwas abgeschnitten
=> zu deutsch, das Bild behält seine Größe bei... <- was bei rechteckigen Monitoren eben dann nicht ideal ist.
 
Es bleibt dabei, was ich eingangs vermutet habe: das Bild wird durch den voreingestellten Drehpunkt bei der 90°-Rotation nach oben aus dem Viewport geschoben.
 
Zurück