Centrer image dans div plus petite

Bonsoir,

Je souhaite afficher des images de taille aléatoire (mais généralement plus larges que hautes) sous la forme de miniatures. ces images sont des lien:

<a href="#"><img src="#" /></a>

Ma miniature doit faire 100px de long comme de large:

a{display:block;overflow:hidden;width:100px;height:100px;}
img{max-height:100%;} /* image plus large que haute */

Mes problèmes sont les suivants:
- Je souhaite centrer l'image horizontalement. a{text-align:center;} et img{margin:0 auto;} ne semblent pas fonctionner. Est-ce parce que l'image est plus grande que sont contenant ?
- Je veux être perfectionniste, et dans le cas (rare) où l'image est plus haute que large, j'ai une marge blanche sur le côté. Existe-il un moyen d'ajuster la taille de l'image en fonction de sa dimension la plus petite plutôt qu'en fonction de sa dimension la plus grande ? img{max-height:100%;max-width:100%;} me donnant une marge blanche dans tous les cas...

Merci.

argh! que son contenant...

Salut,

A mon avis, les liens en bloc avec largeur et hauteur fixées, ce n'est pas un bon point de départ.C'est seulement ton image qui devrait fixer la taille...
Tes images sont-elles en ligne, une au-dessous de l'autre ?

Un petit visuel de l'effet attendu ?

tm

Hello,

Voici ce que je souhaite obtenir:
http://beta.fumblup.net/files/set3/sdiTO1.png
(dans le cas actuel, les images sont légèrement étirées)

Le problème est que les images ont des dimensions et des proportions qui ne sont jamais les mêmes...

Merci

Re,

Quelque chose comma ça ?

tm

Non, et c'est là toute la difficulté: les miniatures doivent toujours avoir les mêmes dimensions: 110px*110px par exemple.

Mmmh, à mon avis, c'est un traitement côté serveur qui serait le mieux...
Idéalement gestion des images via une librairie (genre GD).
Ou, au pis-aller, génération d'une CSS "dynamique" (genre comme ici)...

tm

C'est ce que voulais éviter, je pensais qu'il serait possible de gérer ça via css.

Donc a priori, impossible de centrer horizontalement une image redimensionnée via css dans une div plus petite qu'elle ?

Merci.

Le souci, c'est que tu ne connais pas les dimensions de tes images !
Par défaut, dans le flux, elles se mettent en haut à gauche.
Pour ce que tu veux faire, il faudrait sortir les images du flux et les positionner en fonction de leur ... dimension !

Si tu connais les dimensions, no problemo :

img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px; /* (dimensions connues) */
}

tm

Voilà une solution !
Ça fait beaucoup de balisage à mon goût.
Support ancienne versions de IE limité...

Mais c'est l'effet que tu recherches ?

tm

ok, merci.

Je vais voir comment je peux me débrouiller.

tm™ a écrit :
Voilà une solution !
Ça fait beaucoup de balisage à mon goût.
Support ancienne versions de IE limité...

Mais c'est l'effet que tu recherches ?

tm

Bien joué! Deux <span>, ça reste acceptable à mon goût.

bonsoir, après la bataille

Test sans span , avec : http://dabblet.com/gist/3801744

2 paragraphes jumeau
Overflow et opacité pour visualisé le lien et ou se trouve, s'affiche l'image .

Le premier lien est en overflow:hidden ainsi que ceux dupliqués dans le deuxieme paragraphe pour centrer l'image comme un fond sans la rendre inacessible.

++

C'est pas mal, mais ça ne redimensionne pas les images. J'ai des images qui font 1000*500, d'autres 250*100, et qui ne donnent rien si on n'affiche que 100*100 du milieu de l'image. a priori la solution de tm™ répond mieux au besoin.

...mais merci quand même, j'ai appris des choses

effisk a écrit :
C'est pas mal, mais ça ne redimensionne pas les images.

ah Zut

Bon du coup la base :

img {
/* dimensions 
max-height:100%;min-height:100%;
max-width:100%;min-width:100%; => */ [b]height:100%;width:100%;[/b]
/* alignement sur la boite et non la baseline */
vertical-align:top;
}

aurait suffit.

effisk a écrit :
...mais merci quand même, j'ai appris des choses

super , bon week-end
Modifié par gc-nomade (30 Sep 2012 - 18:37)