[HTML-CSS] <img> Fixer lageur et hauteur maximale en gardant l'image proportionnelle

Version imprimable

28/05/2006, 18h04
d1g-2-d1g

[HTML-CSS] <img> Fixer lageur et hauteur maximale en gardant l'image proportionnelle

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.
28/05/2006, 18h47
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.
28/05/2006, 19h21
d1g-2-d1g
J'ai trouvé une solution qui me convenait, j'ai créer deux classes CSS :
Code:

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.
30/05/2006, 10h48
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
30/05/2006, 11h01
d1g-2-d1g

Centrer une <img> dans une <div> sans connaitre la taille de l'image

Citation:

Envoyé par 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

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...
09/06/2006, 14h49
chris188

Je pense que tu devrais utiliser une table HTML pour povoir centrer l'image dans chaque cellule.
et ne pas oublier   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...
09/06/2006, 16h11
SpaceFrog

avec un petit javascript ...
12/06/2006, 10h04
d1g-2-d1g

Citation:

Envoyé par chris188

Je pense que tu devrais utiliser une table HTML pour povoir centrer l'image dans chaque cellule.
et ne pas oublier   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...