Redimensionner les images [Résolu]

[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 :

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 :

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]

Envoyé par andry.aime

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 :

<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]

Envoyé par andry.aime

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.

[andry.aime]

Bonsoir,

N'y a t-il pas de différence de syntaxe ?

Le syntaxe que j'ai donné est déjà pour tous les navigateurs .
document.documentElement.clientWidth et document.body.clientWidth
pour IE et window.innerHeight pour les autres navigateurs.

Par contre pour les glossaires, je n'en connais pas.

A+.

[argyronet]

Merci andry, je reviens vers toi si nécessaire.

Argy

[argyronet]

Me revoilà...
Désolé pour mon silence, j'étais sur d'autres sujets.
Bref, en conclusion, ça marche mais en fait, c'est pas top pour les shapes ; trop de conditions.
Donc, je vais utiliser des "wrappers" pour contraindre le contenu de la page à garder sa taille unique à 1000 x 600 pour l'image principale et 1600 x 1200 pour le contour.
S'il l'écran du curieux amateur de la page possède un écran géant, le décors autour de l'image sera visible jusqu'à un max de 1536 x 1152 ; au dela, ce sera que du noir.

Merci pour vos aides et suggestions respectives.

Argy