obracanie obrazu za pomocą css

Question

Chciałbym obrócić obraz o 90 stopni tylko za pomocą CSS. Mogę wykonać rotację, ale wtedy pozycja obrazu nie jest tym, czym powinna być. Po pierwsze, nałoży na siebie inne elementy tego samego diva, a po drugie, jego pionowy wymiar będzie większy niż zawierający div. Oto mój kod

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

gdzie dwie klasy są definiowane jako

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

Czy istnieje sposób na utrzymanie wizerunku w sekcji? Mogę przetłumaczyć i przeskalować obraz tak, aby znajdował się w sekcji, ale to działa tylko, jeśli znam rozmiar obrazu wcześniej. Chciałbym mieć niezawodną metodę, która nie zależy od rozmiaru.

Answer 1

Nadaj rodzicowi styl overflow: hidden. Jeśli nakłada się na siebie elementy rodzeństwa, musisz umieścić go wewnątrz pojemnika o ustalonej wysokości/szerokości i nadać mu styl overflow: hidden.

Answer 2

Problem wygląda na to, że obraz nie jest kwadratowy i przeglądarka dostosowuje się jako taka. Po obróceniu upewnij się, że wymiary są zachowane, zmieniając margines obrazu.

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

Ilość będzie zależeć od różnicy wysokości x szerokości obrazu. Może być również konieczne dodanie display:inline-block; lub display:block, aby uzyskać rozpoznanie parametru marginesu.