Ayant eu besoin de rogner une image externe à intégrer à ce blog, j’ai tenté d’abord de le faire en PHP, mais l’image perd considérablement en qualité. J’ai donc fait le tour avant d’avoir l’idée d’utiliser uniquement les feuilles de style, qui est relativement une solution beaucoup plus simple. Ne vous demandez-pas pourquoi je ne l’ai pas téléchargée puis rogner sous Photoshop, c’est une image au contenu dynamique (modifiée en temps réel).

Principe :

Le principe est simple, il suffit d’utiliser l’attribut ‘Overflow’ avec la valeur ‘Hidden’, puis de définir la largeur et la longueur de notre division de telle sorte qu’une partie de notre image contenu soit cachée, et enfin de positionner l’image dans le but de cacher telle partie à rogner.

Script :

Prenons l’exemple de l’image widget fournie par Facebook (affichée à droite de ce site).

Feuille de style CSS :

.conteneur img {
position: relative;
left: 0px;
top: -26px;
}
.conteneur p {
position: relative;
width: 120px;
height: 100px;
overflow: hidden;
}

Html Code (Body):

<div class="conteneur">
<p>
<img src="http://url/image.png"
width="120" height="118" style="border: 0px;" />
</p>
</div>