Discussion :

[d1g-2-d1g]

Bonjour,

je souhaite afficher une galerie de photos dans une page HTML.

Ma galerie est générée dynamiquement en PHP.

Chaque photo est affichée en taille réduite, limité par l'attibut "width" fixé à 150px.

Cependant je souhaiterais définir également une hauteur à ne pas dépassé, mais si je fixe l'attribut "length", les photos ne sont plus proportionnelles.

Je voudrais donc pouvoir fixer une largeur et une hauteur maximale, de manière à ce que mon image ne dépassent jamais ces limittes tout en restant proportionnelle...

Merci d'avance.

[psychoBob]

Le mieux ne serait-il pas de redimensionner l'image via php, en calculant la hauteur souhaitée par rapport à la largeur rapportée à 150px ?

Ensuite tu fixes un cadre de couleur qui a toujours la même dimension afin que la présentation soit homogène. C'est juste la taille de la photo en hauteur qui change.

Ou alors plus simple pour toi mais plus contraignant pour l'utilisateur, tu imposes un format à l'upload.

Ou j'ai pas pigé ce que tu veux, peut être.

[d1g-2-d1g]

J'ai trouvé une solution qui me convenait, j'ai créer deux classes CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.horizontale
{
    width: 150px;
}
 
.verticale
{
    height: 150px;
}

Avant d'afficher mon image, je test en PHP si la largeur est supérieure à la hauteure et je lui attribut la classe en conséquence.

[gailup]

Tu peux utilisé les pourcentage.

Par exemple 25%.
Comme ca les photos seront réduite en gardant leurs hauteurs et largeurs sans déformation

[d1g-2-d1g]

Tu peux utilisé les pourcentage.

Par exemple 25%.
Comme ca les photos seront réduite en gardant leurs hauteurs et largeurs sans déformation

Nan ca ne convient pas car mes images ont toutes des tailles différentes et je veux qu'elle tiennent dans un espace de 150px x 150px sans être déformé...

En tout cas ma solution fonctionne, mais je me retrouve en face d'un autre problème qui est de centrer (verticalement et horizontalement) ces photos (<img>) dans mon cadre de 150x150 (<div>). Je répète que je ne connais pas à la taille de la photo...

[chris188]

Je pense que tu devrais utiliser une table HTML pour povoir centrer l'image dans chaque cellule.
et ne pas oublier &nbsp; dans les cellules vides...
sinon pas besoin de CSS car si tu teste en php la longueur et la largeur, tu sais spécifier si c'est width ou height de la balise IMG qui prend 150px

Les réponses à cette question m'intéresse...

[SpaceFrog]

avec un petit javascript ...

[d1g-2-d1g]

Je pense que tu devrais utiliser une table HTML pour povoir centrer l'image dans chaque cellule.
et ne pas oublier &nbsp; dans les cellules vides...
sinon pas besoin de CSS car si tu teste en php la longueur et la largeur, tu sais spécifier si c'est width ou height de la balise IMG qui prend 150px

Les réponses à cette question m'intéresse...

Désolé, je tiens à respecter les règles du XHTML et du CSS. Donc dans ce cas pas de <table> pour autre chose qu'un tableau de données et pas d'indication de présentation ailleurs que dans mon CSS.

Merci quand même...