Ausrichtung von fotos

[Linuchs]

Und es geht auch aus einem anderen Grund nicht (außer bei quadratischen Bildern): Zuerst wird der vom ungedrehten Bild benötigte Platz ermittelt und freigehalten, dann wird das Bild gedreht, ohne dass der benötigte Platz neu berechnet werden würde.

Meinete ich doch am 27.6. 13:32

„Die Bilder (und andere HTML-Elemente) verschaffen sich Platz im ursprünglichen Format und drehen dann um den Mittelpunkt.“

Da kann man einen Container mit fester Größe vorgeben, z.B. im Tabellen-Kopf wenig breit, aber sehr hoch. Dann den Text unten im Container anordnen und -90° um seine obere linke Ecke 0 0 drehen. So ist er von unten nach oben lesbar:

<section id="hochkant">
  <style>
  #hochkant {
    position: relative;
    width: 1.5em;
    height: 15em;
    border: 1px dotted #000;
  }
  #hochkant div {
    position: absolute;
    left:0;
    bottom: -1em;
    display: inline-block;
    white-space: nowrap;  /* vermeidet Zeilenumbrueche in der ungedrehten Position */
    transform: rotate(-90deg);  /* das allein dreht um die Mitte dieses div */
    transform-origin: 0 0;  /* Zusatz: Drehpunkt X Y festlegen */
  }
  </style>
  <div>unten angeordnet und gedreht</div>
</section>

Die css-Transformer kann man bei Bedarf (für alte Browser?) noch aufmozen:

-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;