Centrer une image dans un conteneur plus petit que celle-ci

Bonjour,

Je pense que le titre est clair :

Je veux centrer une image (100x200, 800x150...) dans un conteneur à taille fixe (ex : 100x100).

Avec un overflow:hidden; car je ne veux voir que la taille du conteneur !

Margin-left:auto; et margin-right:auto; ne fonctionnent que lorsque le conteneur est plus grand que l'image.

Margin-left:-50%; ne fonctionne pas car la marge est calculée à partir du conteneur de taille fixe.

Si vous avez des idées... (mis à part le calcul de la marge négative pour chaque image).. je suis tout ouï !
Modifié par riven (06 Jan 2009 - 16:32)

Bonjour,

Deux solutions:
1. Positionner le conteneur en relatif et l'image en absolu.
2. Positionner l'image en relatif.

Dans les deux cas il faudra calculer (côté serveur ou éventuellement en JavaScript) les valeurs des propriétés left et top. Il s'agira à priori de valeurs négatives.

Pas de solution automatique malheureusement. Tu pourras par exemple te tourner vers JavaScript pour récupérer la largeur de l'image ( grâce à offsetWidth ) et appliquer la position adéquate à celle-ci.
Ne pas oublier de prévoir un fallback heureux si JavaScript est désactivé.

edit: grillé.
Modifié par Benjamin D.C. (06 Jan 2009 - 17:49)

D'accord merci à vous deux j'esperais réellement une solution full css ! tampis

Mettre ton image en background-image ne t'intéresse pas ? Car si ça ne dérange pas ton code (je sais pas tu pourrais par exemple faire des images cliquables ou autre) tu peux toujours mettre un :

background-position: center;

Noix de Coco a écrit :
Mettre ton image en background-image ne t'intéresse pas ? Car si ça ne dérange pas ton code (je sais pas tu pourrais par exemple faire des images cliquables ou autre) tu peux toujours mettre un :

background-position: center;

Hum oui c'est une bonne idée, mais comme je voulais utiliser ceci pour une liste d'images (tirée de la base de donnée) ça m'enchante pas trop de générer un css avec les chemins des photos, mais pour une utilisation dans une charte graphique je retiens l'idée.

Ah mais je viens d'y penser, ça peut le faire en utilisant l'attribut html 'style' (j'ai tellement pas l'habitude...) merci, en fin de compte ça fera l'affaire !

riven a écrit :
Ah mais je viens d'y penser, ça peut le faire en utilisant l'attribut html 'style' (j'ai tellement pas l'habitude...) merci, en fin de compte ça fera l'affaire !

Oui c'est ce que j'allais te faire remarquer en lisant le début de ton post !