Bild mit CSS drehen

Question

Ich möchte ein Bild um 90 Grad nur mit CSS drehen. Ich kann die Drehung machen, aber dann ist die Position des Bildes nicht so, wie es sein sollte. Zuerst wird es einige andere Elemente in demselben div überlagern, und zweitens wird seine vertikale Dimension größer als das enthaltende div. Hier ist mein Code

<article> 
<section class="photo"> 
<div>Title</div> 
<div class="imagetest"> 
<img src="DSC01688.JPG" width=100%/> 
</div> 
</section> 
</article> 

, wo die beiden Klassen definiert werden als

.imagetest img { 
transform:   rotate(270deg); 
-ms-transform:  rotate(270deg); 
-moz-transform:  rotate(270deg); 
-webkit-transform: rotate(270deg); 
-o-transform:  rotate(270deg); 
} 
.photo { 
width: 95%; 
padding: 0 15px; 
margin: 0 0 10px 0; 
float: left; 
background: #828DAD; 
} 

Gibt es eine Möglichkeit, das Bild zu halten innerhalb des Abschnitts? Ich kann das Bild so übersetzen und skalieren, dass es innerhalb der Sektion liegt, aber das funktioniert nur, wenn ich vorher die Bildgröße kenne. Ich hätte gerne eine zuverlässige Methode, die nicht von der Größe abhängt.

Answer 1

Geben Sie den Eltern einen Stil von overflow: hidden. Wenn es überlappende Geschwisterelemente sind, müssen Sie es in einen Container mit einer festen Höhe/Breite legen und geben Sie einen Stil von overflow: hidden.

Answer 2

Das Problem sieht aus wie das Bild nicht quadratisch ist und der Browser als solcher passt. Stellen Sie nach der Drehung sicher, dass die Abmessungen beibehalten werden, indem Sie den Bildrand ändern.

.imagetest img { 
    transform: rotate(270deg); 
    ... 
    margin: 10px 0px; 
} 

Die Menge hängt vom Unterschied in Höhe x Breite des Bildes ab. Sie müssen möglicherweise auch display:inline-block; oder display:block hinzufügen, damit der Randparameter erkannt wird.