Sur un site: Taille de photos variable en fonction de l'écran de l'utilisateur

Krikri · Mars 07, 2012, 10:33:00

J'ai fait des essais avec php et javascript.

Je pensais pouvoir trouver la solution en partant du fait que le php permet d'avoir la taille de départ de la photo, le javascript me permettant ensuite de calculer son rétrécissement en fonction de la taille de l'écran, comme indiqué par erickb.
Je dis bien "je pensais", car je n'ai pas trouvé comment faire passer mes variables php dans le javascript.

Si non, il me reste maintenant à explorer l'idée de Charlie consistant à fixer la taille du conteneur et voir si Height adapte l'image.

Krikri · Mars 15, 2012, 12:01:00

Bonjour à tous,
J'ai réussi à trouver une solution avec CSS, en adaptant la taille de l'image en fonction de l'écran. J'ai veillé à ce que l'image adaptée ne soit jamais plus grande que l'image d'origine. Ce que je crains, c'est que les photos soient tronquées quand l'écran a des dimensions qui s'éloignent des dimensions les plus courantes (écrans plus hauts que larges).
Merci encore à erickb et à Charlie47.

Pour le moment, j'ai appliqué la modif sur la partie "flore" de mon site.
Merci de dire si les photos apparaissent tronquées sur votre écran!

Charlie82 · Mars 15, 2012, 12:14:21

sur mon 24", en affichage plein format on ne voit pas le bas des verticales (tronqué au niveau de la signature à peu près)...

Krikri · Mars 15, 2012, 12:18:23

Bonjour Charlie,
Ton 24", il fait combien de pixels en hauteur et largeur?

Charlie82 · Mars 15, 2012, 12:43:33

1920 x 1200 c'est un 16/10...

Krikri · Mars 15, 2012, 14:11:13

C'est la même taille que le mien, et je n'ai pas ce soucis...j'utilise IE9 ou Firefox. Je pense que tu dois avoir des bandeaux en haut ou en bas du navigateur, ça prend de la place en hauteur.
Est-ce que ça se produit seulement sur les photos 2, 4, 5 des chardons bleus?

Charlie82 · Mars 15, 2012, 14:18:58

J'ai juste la ligne des favoris en haut et rien en bas...
Sur les "paysage" pas de problème par contre...
Mais, et c'est mon seul point de vue, tu ne résous rien, parce qu'il n'est pas obligatoire que les navigateurs de tes visiteurs soient systématiquement ouverts en plein écran .. C'est d'ailleurs mon cas (et ça m'évite de chopper le torticolis

)

Krikri · Mars 15, 2012, 14:46:02

Là, je ne comprends pas. Tu veux dire que ce problème touche les photos en format "portrait"?

Charlie82 · Mars 15, 2012, 15:08:43

oui, oui, uniquement celles en portrait...
Voila ce que j'obtiens en pleine hauteur

Krikri · Mars 15, 2012, 20:40:44

Merci, tu as bien fait de poster la copie d'écran.

Encore une chose:
Sur mon ordinateur, quand, sur cette photo 1 des chardons, je change la hauteur de la fenêtre avec la souris, la taille de l'image varie.

Avec la photo suivante, la 2 des chardons, qui est en mode paysage, c'est en variant la largeur de la fenêtre que la taille de la photo varie.

Est ce que ça le fait aussi chez toi?

Charlie82 · Mars 15, 2012, 21:21:20

Chez moi avec la photo en portrait aucun changement en modifiant la taille de la fenêtre (quel que soit le sens de la modification)
Avec une photo en paysage, effectivement modification de la taille uniquement si fenêtre modifiées en largeur (Firefox10 ou IE9)

Krikri · Mars 15, 2012, 21:57:35

Ok, oui, tu as raison avec M firefox ça ne marche pas non plus chez moi en vertical, et avec IE9, ça dépend si on clique sur l'icone option de compatibilité, l'icone rectangulaire avec une ligne brisée blanche!
Merci, Charlie47, ça me fait avancer, je vais reprendre ça.

Krikri · Mars 16, 2012, 21:32:09

Voila, j'espère avoir réparé cette erreur: chez moi ça marche avec Firefox. Avec IE aussi, quelle que soit la position du bouton affichage de compatibilité.

Charlie82 · Mars 16, 2012, 21:39:32

Ben ouala

Alors tu as utilisé quoi comme code ? Ca pourra servir à d'autres...
PS: pourquoi pas un petit effet d'ombre derrière tes photos... ? Ca les met bien en valeur

Krikri · Mars 17, 2012, 11:51:29

Pour les ombres, c'est plus facile...

Je ne vais pas donner des leçons et laisser croire que je suis un spécialiste du CSS, bien au contraire.
J'ai juste utilisé le principe donné par erickb dans son dernier exemple :

Citation
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
}
img.a {height:50%;}
img.b {height:30%;}
img.c {height:10%;}
img.d {width:30%;}
img.e {width:15%;}
img.f {width:5%;}
</style>
</head>
<body>
<img class="a" src="imgauto.jpg" />
<img class="b" src="imgauto.jpg" />
<img class="c" src="imgauto.jpg" />

<img class="d" src="imgauto.jpg" />
<img class="e" src="imgauto.jpg" />
<img class="f" src="imgauto.jpg" />
</body>
</html>

J'ai utilisé comme critère le rapport hauteur/largeur de la photo, ce qui permet de présenter des pages avec des configurations différentes. Le CSS comme le html sont configurés par le Php.
Comme je l'ai dit plus haut, je n'ai pas trouvé l'idéal, mais juste un compromis qui va peut être marcher avec certains navigateurs jusqu'à leur prochaine mise à jour...

Krikri · Avril 20, 2012, 10:21:54

Oui, erickb, je peux écrire, mais ce que tu proposes je l'ai essayé et ça ne marche pas non plus chez moi...
Comme tout mon programme est basé sur php, j'ai essayé, mais sans succès, plusieurs solutions préconisées sur la toile pour faire passer les variables de php à javascript et vice-versa.

J'ai fait des essais avec javascript et html, et ça marche très bien. J'arrive à recalculer les nouvelles dimensions de l'image en fonction de la fenêtre. C'est même beaucoup plus efficace que le CSS qui ne permet pas de prendre en compte à la fois de la hauteur et de la largeur de la fenêtre et qui oblige à "bricoler".

Krikri · Avril 21, 2012, 14:27:17

erickb, j'ai fait d'autres essais de passage de variables entre php et javascript et j'en ai déduit que le passage de variable peut se faire seulement dans le sens php > javascript.
Ce qui est logique, puisque php se joue au niveau serveur, avant d'envoyer la page sur le net, le javascript s'exécute ensuite dans l'ordinateur du client.

Voici ce que cela donne:

Citation<?php
// passage de variable de php à javascript
$varphp=18;
echo '$varphp= ' . $varphp;
echo'<script type="text/javascript">var varjscript=' . $varphp .'</script>';
echo '
';
?>
<script type="text/javascript">
document.write('varjscript=' + varjscript );
</script>

grosnoob06 · Mai 02, 2012, 17:41:45

maintenant t'as carrément des sites entiers qui sont dits "responsive" (html5 / CSS3) et qui s'adaptent en entier à ton navigateur et machine, par exemple en portrait ou en paysage sur un ipad et bien en temps réel la page se redimensionne quand tu bascules de l'un à l'autre, sans même rafraîchir la page... c'est pas seulement une image mais toute ta page qui s'adapte... c'est particulièrement valide sur les smartphones et autres iPhone / iPad.

t'as même plein de templates sur le net, qui intègrent déjà ça... pas besoin de se fouler en fait.

un exemple en cours sur lequel je bosse là (bon c'est pas encore rempli parce que je suis sur le backoffice et la base de données là) http://kimmobilier.com/index.php

Flash est quant à lui mort depuis que les smartphones ne l'intègrent plus ou mal, surtout les machines Apple qui ne veulent pas en entendre parler...

vincent3569 · Mai 03, 2012, 15:11:05

oui, les thèmes "responsives" sont à la mode, la faute aux smartphones et aux tablettes.

on en trouve pléthores sur internet pour les différents CMS (en particulier wordpress).
il se trouve justement que j'en ai fait un pour ZenPhoto : voir ce message : http://www.chassimages.com/forum/index.php/topic,153019.0.html.

on trouve aussi plein de frameworks (kit HTML/CSS) permettant de construire assez facilement des galeries au comportement "adaptatifs".
vous pourrez trouver quelques infos sur cet article : http://www.vincentbourganel.fr/news/zenphoto-and-responsive-web-design.