Discussion :

[argyronet]

Bonjour,

Je suis à la recherche d'un processus qui me permettrait, selon la résolution de l'écran, de redimensionner l'ensemble des images et de leuir position avec un ratio de manière à ce que la page garde son aspect (avec une tolérance bloquante pour les très grands ou les trop petites résolution où la présenattion d'ensemble garderait une taille unique et centrée dans ces 2 cas...)

Je ne souhaite pas une solution de Si telle résolution, telle image, telle position (ça je sais faire - c'est lourdeau et ça nécessite beaucoups de fichiers), je souhaiterais quelque chose de générique.

Pouvez vous me guider un peu ?
Est-il préférable d'user de javascript ou plutôt du CSS dans mon cas?

La page concernée est assez complexe graphiquement parlant.
Pour vous situer un peu, des rideaux de théatre s'ouvrent et font apparaître des projecteurs qui s'allument sur des personnages...

Merci par avance

Argy

[andry.aime]

Bonsoir,

Je ne pense pas que tu peux récupérer la résolution de l'écran avec JS, mais les dimensions des fenêtres oui.

Code :

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

1
2
var largeur=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var longueur=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Ensuite tu peux modifier les hauteurs et largeurs des images par rapport à ça. Tu récupères les images dans un boucle et faire les modif

Code :

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

1
2
3
4
for (var i=0; i< document.images.length; i++){
   document.images[i].heigth=***;//selon le rapport avec la hauteur de l'ecran;
   document.images[i].width=***;//selon le rapport avec la largeur de l'ecran;
}

A+.

[NoSmoking]

Je ne pense pas que tu peux récupérer la résolution de l'écran avec JS, mais les dimensions des fenêtres oui.

on peut mais il reste préférable, comme la dit andry.aime, d'utiliser les dimensions de la fenêtre...
...sauf que si un dimensionnement intervient il faut tout recalculer, mais ce n'est pas forcément un problème.

Une autre solution est de passer par le CSS exemple:

Code :

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

<img src="image_fond.jpg" style="width:100%;max-width:800px;">

[andry.aime]

Je ne pense pas que ça prenne une seconde de les recalculer dans window.onresize

[NoSmoking]

Je ne pense pas que ça prenne une seconde de les recalculer dans window.onresize

largement bien moins que cela même, ce n'était pas une remarque rédhibitoire.

[argyronet]

Merci bien, je vais mettre cela à contribution.

N'y a t-il pas de différence de syntaxe ?
J'ai eu quelques souci entre IE - Firefox - Opéra... et je ne trouve pas toujours un glossaire de correspondance...
Par exemple la fonction revealTrans() pour laquelle je n'ai pas trouvé d'équivalent en Firefox...

Argy

P.S. Oui, j'ai confondu résolution et dimensions des fenêtres.