[RESOLU] Afficher image dans une cellule tableau

30 août 2016, 23:13

Bonjour,

J'ai un script php me permettant de faire une galerie photos avec :
- en premier niveau, les albums (chaque répertoire étant un album, et la miniature de l'album est une miniature de la première image du répertoire)
- en deuxième niveau (donc on clique sur un album), le script construit une mosaïque de toutes les photos de l'album, et réduit à une taille donnée , chaque photos, pour qu'elle fasse soit 1200px de large, soit 900px de haut (selon si la photo est plus haute que large ou inversement).

Quand on clique sur une miniature de la mosaïque, la photo est affichée dans un tableau (qui prend toute la page en largeur et en hauteur) avec :
- en première ligne (un td colspan=3) ) hauteur fixe , le chemin de la photo
- en deuxième ligne , une première cellule pour mettre une flèche "Précédente", une deuxième cellule avec la photo, et une dernière avec une flèche "Suivante". La hauteur de la deuxième ligne varie pour que la tableau prenne toujours toute la page

Pour les photos en format paysage, j'arrive à la faire s'adapter à la taille de la cellule (avec un width=100%.
Pour les photos en format portrait, je n'arrive pas à la faire s'adapter à la hauteur de la cellule même en mettant un height=100%. Ce qui fait que souvent , le tableau est plus haut que la page et donc impose de défiler vers le bas pour voir le bas de l'image.
J'ai fouillé des tas de forum français comme anglais, essayé des tas de scripts, mais aucun ne m'a permis d'arriver au résultat que je cherche. Plusieurs personnes disent qu'il faut voir coté javascript ou jquery mais sans ne donner aucun lien ni rien (super la réponse utile).

Si quelqu'un a une idée, je serais preneur avec plaisir

Merci
Couin

31 août 2016, 00:16

Bonjour,

Fait nous un exemple de code minimaliste en HTML qui présente ton problème.
Tu peux utiliser https://placehold.it pour te générer une image fake à la taille que tu veux.
Et même https://jsfiddle.net/ pour une preview en direct

31 août 2016, 01:47

Bonjour,

Je n'ai pas trop pigé les sites donnés par les liens, alors du coup j'ai mis là le code et des captures d'écran de ce que cela donne.

Voici la partie du code simplifié correspondante au tableau (j'ai fais comme si c'était une image définie et non par les variables PHP) :

Code : Tout sélectionner

<table border="1" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
	<tr height=10>
	<td colspan=3><div align="center" class="fdgris">Photo</div>
	</td>
	</tr>
    <tr>
	<td width="7%" align="center" valign="middle">
	<img src="images/prev_off.gif"  onmouseover="this.src='images/prev_on.gif';" onmouseout="this.src='images/prev_off.gif';" width="100%" border="0"></a>

	</td>
	<td align="center" valign="middle">
	<img src="image.jpg" height="100%" border="0">
	</td>
    <td width="7%" align="center" valign="middle"  >
	<img src="images/next_off.gif"  onmouseover="this.src='images/next_on.gif';" onmouseout="this.src='images/next_off.gif';"   width="100%" border="0"></a>

	</td>
  </tr>
</table>

L'image exemple fait 636x900 px .

Voilà ce que ça donne :

Le tableau devient plus haut que l'écran et dépasse, imposant de défiler vers le bas pour voir le reste de l'image.
Je voudrait que la photo s'affiche adapté proportionnellement à la hauteur de la cellule sans que la cellule dépasse de la fenêtre du navigateur.

Si je retire la balise img du code, on voit que le tableau est entièrement visible :

Merci

31 août 2016, 12:37

Salut,

Pour forcer la hauteur maximum l'image à la taille de l'écran, tu peux essayer d'appliquer la propriété css max-height: 100vh; (ou un peu moins que 100vh pour prendre en compte l'espace occupé par le tableau).
Exemple : https://jsfiddle.net/y18rypq4/

Bonne journée,

31 août 2016, 22:50

Salut Ynx,

Impeccable, merci beaucoup !

A bientôt !
Couin

[RESOLU] Afficher image dans une cellule tableau

Qui est en ligne