Se connecter avec
S'enregistrer | Connectez-vous

[resolu][css] Alignement vertical d'images pour galerie photo

Dernière réponse : dans Programmation

Bonjour à tous,

je suis en train de concevoir une galerie photo, et courageusement :-) , j'ai choisi de ne pas utiliser de tableaux pour la mise en page mais d'utiliser les feuilles de style.

Voilà ma démarche :
- J'ai un fichier .php pour où s'affiche la galerie et un fichier .css pour la mise en page.
- Dans un premier temps j'ai conçu un canevas (ou contenant) qui est en fait l'équivalent d'une case pour un tableau. La taille de ce canevas est fixe.
- J'affiche ensuite dans chaque canevas une photo (dont la dimension est dynamiquement retravaillée avec la librairie GD de PHP pour entrer dans le canevas). Mes photos peuvent être au format portrait ou paysage, et le ratio longueur/largeur n'est pas fixe.

Voilà mon problème : je voudrais que chaque image soit "collée" à la bordure basse de son canevas, et non à la bordure haute comme par défaut. L'idée est que l'alignement des images soit le même que celui des galeries de google.

J'ai essayé les idées suivantes :
- vertical-align. Sans effet.
- padding, padding-top... Pas adapté, car la distance entre la bordure haute d'un canevas et une photo n'est pas fixe, donc pas moyen de fixer une valeur pour padding. Comme il y a beaucoup de ratio différent, je ne souhaite pas non plus créer un style pour chaque ratio avec un padding-top adapté, ce serait vraiment trop galère.

Voici les styles conçus pour mes canevas et mes photos :
.bloc {
float : left;
padding : 0;
margin : 10px 24px;
width : 122px;
height : 136px;
}

.photo {
padding : 0;
margin : 0;
text-align : center;
}

J'espère que mes explications sont claires.
Merci d'avance pour votre aide.

Autres pages sur : resolu css alignement vertical images galerie photo

Lassé par la pub ? Créez un compte

Ben tu pourrais mettre le padding dans la page PHP et dans ce cas pouvoir le gérer à moins que tu utilises plusieurs styles et que tu charges un certain style pour certaines images... mais étonnant que ce qu'on a vu au-dessus ne fonctionne pas... sur Google ils utilisent quoi ?

Sur developpez.com, j'ai vu un post décrivant un problème similaire. La réponse fut de créer un style dans le fichier php, en associant à padding une valeur générer dynamiquement suivant la photo; le code est le suivant :
  1. <?php
    

  2. ...
    

  3. list($width, $height, $type, $attr) = getimagesize("img/$nom_fichier[$numero]");
    

  4. $paddingpx = (350 - $height)/2;
    

  5. echo '<div style= "padding-top: '.$paddingpx.'" >'; 
    

  6. ...
    

  7. ?>


Je pense que je vais l'utiliser, mais j'esperais une solution à base de padding-bottom : 0 ou un truc dans le style, en gardant la mise en forme dans ma css.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde