faire pivoter l'image avec css

Je voudrais faire pivoter une image de 90 degrés avec CSS. Je peux faire la rotation, mais alors la position de l'image n'est pas ce qu'elle devrait être. Tout d'abord, la superposition de certains autres éléments dans la même div, et le second, sa dimension verticale va devenir plus grand que la div contenant. Voici mon code

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

où les deux classes sont définies comme

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

Est-il un moyen de garder l'image au sein de la section? Je peux le traduire et l'échelle de l'image, de sorte qu'il est à l'intérieur de la section, mais qui ne fonctionne que, si je sais que la taille de l'image à l'avance. Je voudrais avoir une méthode fiable qui ne dépend pas de la taille.

OriginalL'auteur v923z | 2012-12-02

  1. 9

    Donner à la mère un style de overflow: hidden. Si c'est le chevauchement des éléments frères, vous devrez le mettre à l'intérieur d'un conteneur avec une fixe en hauteur et en largeur et lui donner un style de overflow: hidden.

    Merci pour la réponse rapide! Qui en effet résoudre le problème.
    Regardé partout, ce one-liner est la réponse

    OriginalL'auteur DC_

  2. 16

    Le problème ressemble à l'image n'est pas d'équerre et le navigateur s'adapte en tant que tel.
    Après la rotation de s'assurer que les dimensions sont retenues par la modification de l'image de la marge.

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

    Le montant dépendra de la différence de hauteur x largeur de l'image.
    Vous pouvez aussi avoir besoin d'ajouter display:inline-block; ou display:block pour l'obtenir à reconnaître le paramètre marge.

    OriginalL'auteur James Bone