Rogner une image

 

Voici une solution pour rogner une image grâce à CSS.

L'idée principale est de placer l'image dans une DIV ayant une classe permettant le rognage. Il est ensuite possible d'attribuer une classe CSS aux images pour déplacer l'image dans la zone de DIV.

 

Exemple 1

Code HTML pour afficher l'image dans la DIV

<div class="image-rognage">
    <img alt="MonImage" src="/DossierImages/MonImage.jpg" />
  </div>
</div>

 

Définition du style de la classe image-rognage :

.image-rognage {
    position: relative;
    width: 360px;
    height: 240px;
    overflow: hidden;
    border: 1px red solid;
}

 

 

Exemple 2

Code HTML avec class pour positioner l'image dans la zone de DIV

<div class="image-rognage">
    <img alt="MonImage" src="/DossierImages/MonImage.jpg" class="centre" />
</div>
</div>

centre pourra être modifié en centre-bas, bas-droite selon votre besoin.

 

Définition des styles utiles :

.image-rognage {
    position: relative;
    width: 360px;
    height: 240px;
    overflow: hidden;
    border: 1px red solid;
}
.centre {
    position:absolute;
    left:-50%;
    top:-50%;
}

 

Voici des exemples de styles alternatifs pour les images selon vos besoins :

.bas {
    position:absolute;
    bottom:0px;
}

.centre-haut {
    position:absolute;
    left: -50%;
}

.centre-bas {
    position:absolute;
    left: -50%;
    bottom: 0px;
}

Il suffit ensuite de changer la ligne déclarant l'image dans le code HTML :
   <img alt="MonImage" src="/DossierImages/MonImage.jpg" class="centre"/>
centre devient centre-haut...etc...