28172 sujets

CSS et mise en forme, CSS3

Bonsoir !

Voilà, j'ai une grande image qui doit faire 100px max de coté, j'ai donc utilisé:


.albumphoto {
	max-width: 100px; 
	max-height: 100px;
	vertical-align:middle;
}
 

Le problème, c'est que je voudrais que cette image soit dans un "carré de 100px de coté".
Parce que si j'enchaine deux petites images, bah ca fait pas beau...

Une image exemple:
http://i80.servimg.com/u/f80/12/50/72/39/pb_css10.png
Si tous les carrés sont des images
A gauche, c'est le problème:
les imgs sont "cote a cote".

Il faudrait comme à droite: En gros, les images sont dans des carrés invisible de 100px de coté...

Pour que toutes les colonnes soient égales, que toutes les photos soient alignées !

Merci !
Modifié par bdx-77 (20 Sep 2009 - 21:57)
Administrateur
Bonjour,

si tu veux déformer tes images width et height.
Sinon tu peux placer chaque image dans un conteneur qui aura une largeur et une hauteur genre :
div {
display: inline-block; /* zut à Firefox 2 [langue] */
width: 100px;
height: 100px;
text-align: center;
}


Mieux:
SI tu utilises un span ou autre élément par défaut en ligne, alors display: table; fonctionne parfaitement sur IE ... et c'est un peu le rendu que tu cherches à obtenir.
Bonjour,

Quand ça ne veut pas...
Je n'y arrive toujours pas !

La seule solution pour l'instant, se serai un tableau, mais je ne veux pas, c'est pas très correct...