Solution CSS/JQuery pure pour centrer/recadrer des images de différentes tailles dans une boîte div divisée en taille

Question

Je travaille sur un site Web communautaire avec des miniatures de tailles légèrement différentes.

J'ai une boîte div à 165x165 pixels.

Certaines images miniatures pleine taille finissent par être 165 pixels, d'autres 180, 192, 205, etc.

Ce que je voudrais faire est de toujours forcer ceux-ci à afficher centré horizontalement dans la boîte de div sans plus de 165 pixels. Par conséquent, si une image est de 185 pixels horizontalement, elle recadra 10 pixels vers la gauche et 10 pixels vers la droite. Une image de 205 pixels horizontalement serait recadrée de 20 pixels de chaque côté.

Malheureusement, je n'aurai pas accès au code côté serveur pour cela, donc tout doit être fait en javascript et/ou jquery.

Le plus grand défi que je vois avec ceci est que les tailles d'image changent toujours.

Answer 1

Vous devriez pouvoir mettre overflow:hidden sur le <div> et laisser le navigateur s'occuper du découpage. Quelque chose comme ceci:

<div style="width: 165px; height: 165px; overflow: hidden;"> 
    <img ...> 
</div> 

Un exemple concret: http://jsfiddle.net/ambiguous/M3FzZ/

Si vous devez le faire en jQuery, puis:

$('div-selector').css('overflow', 'hidden'); 

Où "div-sélecteur" est tout sélecteur dont vous avez besoin pour obtenir votre <div> s.