Sujet Précédent Sujet Suivant

[CSS] Redimension Image

Résolu/Fermé
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 - 4 févr. 2008 à 15:58
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 - 2 oct. 2008 à 11:05
Bonjour,

J'ai actuellement une page qui affiche une image après avoir été réduite.
J'avais commencé grâce à une fonction JavaScript mais cela ne marchait pas.
La photo ne s'affichait pas tout le temps et ce de façon totalement aléatoire à chaque chargement de la page (voir mon ancien post : http://www.commentcamarche.net/forum/affich 4735139 javascript redimensionnement d image).

J'ai donc abandonné car impossible pour moi de trouver le problème.
J'utilise maintenant une simple classe CSS mais j'ai le même problème (ou presque). L'image ne s'affiche pas tout le temps.
Mais là, parfois, à ma grande surprise, la photo s'affiche avec une taille presque 10 fois inférieure à ce qui devrait s'afficher.

En résumé, une fois sur trois, la photo s'affiche bien, ne s'affiche pas , ou s'affiche en beaucoup trop petit !!

Dans le cas ci-dessous, une image aux dimensions de 640*425 s'affiche de trois façons différentes : - 220*165 (ce que je veux)
- 32*28
- 0*0

Ceci est la classe CSS pour la photo :

.cadre_photo
{
border : 3px;
border-style : double;
border-color : #000033;
max-width : 220px;
max-height : 300px;
width : expression(Math.min(this.width, 220));
height : expression(Math.min(this.height, 300));
}

J'affiche ensuite l'image dans le coprs de la page.

<img src="photos_etablissements/etablissement_<%=RS("id")%>.jpg" class="cadre_photo" />

Merci pour votre aide !!
A voir également:

19 réponses

Réponse 1 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
7 févr. 2008 à 09:10
Bon ben j'ai oublié, mais je me rattrape ce matin. Voila ta fonction modifié (par contre, le résultat attendu ne sera pas le même que ta fonction d'origine) 
function redimImage(inImg, inMW, inMH){  
  // Cette function recoit 3 parametres
  // inImg : Chemin relatif de l'image
  // inMW  : Largeur maximale
  // inMH  : Hauteur maximale
  var maxWidth = inMW;
  var maxHeight = inMH;
  // Declarations des variables "Nouvelle Taille"
  var dW = 0;
  var dH = 0;
  // Declaration d'un objet Image
  var oImg = new Image();
  // Enregistrement des varaibles sur l'image
  oImg.maxWidth = inMW;
  oImg.maxHeight = inMH;
  
  oImg.onload = function(){
    alert('Image chargé');
    /* Quand on est dans une fonction évenement, du style onload, "this"
    * correspond à l'objet qui possede la fonction. Dans notre cas, c'est l'image.
    * De même, on est pas sûr de retrouver les variables de la fonction de départ.
    *C'est pour cela que j'ai enregistré les tailles max dans l'objet l'image. */
    
    // On recupere les tailles reelles
    var h = dH = this.height;
    var w = dW = this.width;
    // Si la largeur ou la hauteur depasse la taille maximale
    if ((h >= this.maxHeight) || (w >= this.maxWidth)) {
      // Si la largeur et la hauteur depasse la taille maximale
      if ((h >= this.maxHeight) && (w >= this.maxWidth)){
        // On cherche la plus grande valeur
        if (h > w) {
        dH = this.maxHeight;
        // On recalcule la taille proportionnellement
        dW = parseInt((w * dH) / h, 10);
        } else {
        dW = this.maxWidth;
        // On recalcule la taille proportionnellement
        dH = parseInt((h * dW) / w, 10);
        }
      } else if ((h > this.maxHeight) && (w < this.maxWidth)) {
        // Si la hauteur depasse la taille maximale
        dH = this.maxHeight;
        // On recalcule la taille proportionnellement
        dW = parseInt((w * dH) / h, 10);
      } else if ((h < this.maxHeight) && (w > this.maxWidth)) {
        // Si la largeur depasse la taille maximale
        dW =this.maxWidth;
        // On recalcule la taille proportionnellement
        dH = parseInt((h * dW) / w, 10);
      }
      
      // On ecrit l'image dans le document
      document.writeln("<img src=\"" + inImg + "\" width=\"" + dW*2 + "\" height=\"" + dH*2 + "\" border=\"0\" class=\"cadre_photo\" >");
      /* Attention, vu que l'on est dans une fonction évenement, on n'est plus a
      * l'endroit ou l'on a exécuter le script. Le document.writeln risque d'écrire
      * n'importe ou, et peut même remplacer le texte du document complet. */
      
    }
  }

  // Affectation du chemin de l'image a l'objet
  oImg.src = inImg;
};


Pour être sûr que l'image ce mette la ou tu veut, il vaudrait mieux lui dire dans quel objet la mettre. Pour l'instant tu doit faire comme cela : 
<body>
  <div>
  <script type="text/javascript">
    redim('monImage.jpg', 100, 100);
  </script>
  </div>
</body>

Le mieux serait de faire ainsi : 
<body>
  <div id="monConteneur">
  </div>
  <script type="text/javascript">
    redim('monImage.jpg', 100, 100, 'monConteneur');
  </script>
</body>

On rajouterai donc à la fonction, l'identifiant de l'objet qui va contenir l'image. Le document.writeln() serait remplacer par : 
// Récupération de l'objet conteneur
var conteneur = document.getElementById('monConteneur');
// On test si l'objet a bien été récupéré
if(conteneur){
  // On met la taille à l'objet Image
  oImg.width = dW*2;
  oImg.height = dH*2;
  // On ajout l'image à la fin du conteneur
  conteneur.appendChild(oImg);
}
1
Réponse 2 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
4 févr. 2008 à 17:31
Le problème dans ce code (est dans celui de l'autre post), c'est que la fonction qui récupère la taille de l'image ce fait au début du chargement de l'image, et non pas à la fin de celle-ci.
Si cela marche de temps en temps, c'est parce que le navigateur charge l'image plus vite qu'il execute le script (car il récupère l'image dans le cache). Mais parfois, il met un peu plus de temps, ce qui explique le 0*0 (par contre, je comprend pas pourquoi il y a parfois 32*28).

Personnellement, je n'aime pas cette méthode "expression" propre a IE. Le mieux est d'utiliser le javascript.
Pour reprendre ton précédent post, il faut attendre que l'image soit bien charger. Soit en mettant un évenement dessus : 
img.onload = function(){
  /* code */
}

Soit (méthode moins "propre") de faire une oucle est d'attendre que l'image soit chargé : 
while(!img.complete){
  /* On ne fait rien */
}

(méthode qui peut boucler indéfiniment si l'image ne se charge pas)
0
Réponse 3 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
5 févr. 2008 à 10:45
Bonjour GallyNet,

Chez moi, la méthode while boucle indéfiniment comme tu l'avais prédit.

Je ne comprend pas comment utiliser img.onload (dans la fonction JS, dans le corps de la page,.....).
Si tu pouvais m'éclairer un peu là.

Merci de ton aide !!
0
Réponse 4 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
5 févr. 2008 à 16:03
Pour le onload, on passe une fonction qui sera exécutée à la fin du chargement de l'image. Si tu veut tester si le chargement marche bien, tu peut commencer par mettre un simple alert : 
var img = new Image();
img.onload = function(){
  alert('Image chargé');
}
img.src = 'monImage.jpg';

(on met le img.src apres avoir mis la fonction, au cas ou le navigateur charge l'image très vite, et qu'il n'ait pas encore de fonction a lancer)

Apres, il suffit de mettre le code voulu dans la fonction, et celui-ci sera forcément exécuté quand l'image sera chargée. Ainsi, pas de risque de boucle infinie.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
5 févr. 2008 à 18:04
je pense avoir bien fait ce que tu m'a dits. Mais bien que le message d'alerte me dise bien que l'image est chargée, celle-ci n'est pas toujours ouverte. 

function redimImage(inImg, inMW, inMH)
		{	
		  // Cette function recoit 3 parametres
		  // inImg : Chemin relatif de l'image
		  // inMW  : Largeur maximale
		  // inMH  : Hauteur maximale
		  var maxWidth = inMW;
		  var maxHeight = inMH;
		  // Declarations des variables "Nouvelle Taille"
		  var dW = 0;
		  var dH = 0;
		  // Declaration d'un objet Image
		  var oImg = new Image();
		  // Affectation du chemin de l'image a l'objet
		  
			oImg.onload = function()
			{
			  alert('Image chargé');
			}

		  oImg.src = inImg;
		  // On recupere les tailles reelles
		  var h = dH = oImg.height;
		  var w = dW = oImg.width;
		  // Si la largeur ou la hauteur depasse la taille maximale
		  if ((h >= maxHeight) || (w >= maxWidth)) {
			// Si la largeur et la hauteur depasse la taille maximale
			if ((h >= maxHeight) && (w >= maxWidth)) {
			  // On cherche la plus grande valeur
			  if (h > w) {
				dH = maxHeight;
				// On recalcule la taille proportionnellement
				dW = parseInt((w * dH) / h, 10);
			  } else {
				dW = maxWidth;
				// On recalcule la taille proportionnellement
				dH = parseInt((h * dW) / w, 10);
			  }
			} else if ((h > maxHeight) && (w < maxWidth)) {
			  // Si la hauteur depasse la taille maximale
			  dH = maxHeight;
				// On recalcule la taille proportionnellement
			  dW = parseInt((w * dH) / h, 10);
			} else if ((h < maxHeight) && (w > maxWidth)) {
			  // Si la largeur depasse la taille maximale
			  dW = maxWidth;
				// On recalcule la taille proportionnellement
			  dH = parseInt((h * dW) / w, 10);
			}
		  }
		  // On ecrit l'image dans le document
		  document.writeln("<img src=\"" + inImg + "\" width=\"" + dW*2 + "\" height=\"" + dH*2 + "\" border=\"0\" class=\"cadre_photo\" >");
		  };
0
Réponse 6 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
6 févr. 2008 à 14:25
Je pense que l'affichage de ton image ne marche pas, car le traitement que tu fait, n'est pas mis dans la fonction onload.
C'est un peu compliqué a expliquer, mais la fonction onload est asynchrone. Elle est exécuter quand le chargement de l'image sera terminé, mais le reste du script continuera de s'exécuter même si l'image n'est pas chargé.

J'ai pas trops le temps actuellement, mais si j'y pense se soir, je te fait un exemple complet a partir de ta fonction.
0
Réponse 7 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
8 févr. 2008 à 17:06
Salut,

Désolé de répondre si tard mais j'étais en déplacement.

J'ai imbriqué tout ça et ça marche impec. Merci beaucoup pour tes explications qui sont très bien faites.
Car le plus important, ce n'est pas que ça marche mais c'est de comprendre, et là c'est le cas.

Un très grand merci GallyNet !!!!!!

ps : juste une remarque, lorsqu'on appel la fonction 
redim('monImage.jpg', 100, 100, 'monConteneur');
, je ne vois pas l'utilité du paramètre 'monConteneur' puisque qu'on l'appel directement dans la fonction grâce à 
var conteneur = document.getElementById('monConteneur');
.
0
Réponse 8 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
8 févr. 2008 à 17:20
En fait, pour prendre correctement en compte le passage de l'identifiant du conteneur, il faut faire quelque modification. 
function redimImage(inImg, inMW, inMH){

devient 
function redimImage(inImg, inMW, inMH, conteneur){


en même temps que l'on fait 
oImg.maxWidth = inMW;
oImg.maxHeight = inMH;

on rajoute 
oImg.conteneur = conteneur;


et au lieu de faire 
var conteneur = document.getElementById('monConteneur');

on fera 
var conteneur = document.getElementById(oImog.conteneur);


Comme ca, la fonction devient utilisable pour plusieurs conteneur différent, et plus seulement pour un seul.
0
Réponse 9 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
8 févr. 2008 à 17:36
Oki oki,

Tout est très clair maintenant.

Encore merci pour tout le temps que t'as passé à m'aider.

A bientôt !!
0
Réponse 10 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
13 févr. 2008 à 14:33
Rhhaaaaaaaaaaaaaaa !!!!!!!!!!!!!!!!

J'en rage !!!!!!! En fait, je pensais que ça marchait mais j'avais juste de la chance lors de mes tests. En fait j'en suis exactement au même point qu'au début là.

J'étais pourtant sur que ta méthode marcherait. Je ne sais vraiment plus quoi faire. En plus, tout les messages laissés à l'auteur de cette source Javascript par tous ceux ayant le même problème sont restés sans réponses.

Et dire que j'avais mis ce poste en "résolu" !!! snif snif
0
Réponse 11 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
13 févr. 2008 à 14:50
"En fait j'en suis exactement au même point qu'au début là. "
Sa fait a nouveau un redimensionnement aléatoire ? Est-ce que ça le fait quand tu charge une seule image, ou plusieurs ?

C'est quand même bizarre que ça marche pas, la taille que l'on récupère devrait être bonne.
0
Réponse 12 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
14 févr. 2008 à 09:40
En fait, la photo s'affiche correctement ou ne s'affiche pas du tout.

Je ne charge qu'une seule image dans mon exemple.
Cependant, l'appel de fonction est présent deux fois dans ma page mais dans des "if" différents.

Encore un copier/coller de mon code :

Fonction entre <head> et </head> : 

function redimImage(inImg, inMW, inMH, conteneur){
  // Cette function recoit 3 parametres
  // inImg : Chemin relatif de l'image
  // inMW  : Largeur maximale
  // inMH  : Hauteur maximale
  var maxWidth = inMW;
  var maxHeight = inMH;
  // Declarations des variables "Nouvelle Taille"
  var dW = 0;
  var dH = 0;
  // Declaration d'un objet Image
  var oImg = new Image();
  // Enregistrement des varaibles sur l'image
  oImg.maxWidth = inMW;
  oImg.maxHeight = inMH;
  oImg.conteneur = conteneur;
  
  oImg.onload = function(){
    /* Quand on est dans une fonction évenement, du style onload, "this"
    * correspond à l'objet qui possede la fonction. Dans notre cas, c'est l'image.
    * De même, on est pas sûr de retrouver les variables de la fonction de départ.
    *C'est pour cela que j'ai enregistré les tailles max dans l'objet l'image. */
    
    // On recupere les tailles reelles
    var h = dH = this.height;
    var w = dW = this.width;
    // Si la largeur ou la hauteur depasse la taille maximale
    if ((h >= this.maxHeight) || (w >= this.maxWidth)) {
      // Si la largeur et la hauteur depasse la taille maximale
      if ((h >= this.maxHeight) && (w >= this.maxWidth)){
        // On cherche la plus grande valeur
        if (h > w) {
        dH = this.maxHeight;
        // On recalcule la taille proportionnellement
        dW = parseInt((w * dH) / h, 10);
        } else {
        dW = this.maxWidth;
        // On recalcule la taille proportionnellement
        dH = parseInt((h * dW) / w, 10);
        }
      } else if ((h > this.maxHeight) && (w < this.maxWidth)) {
        // Si la hauteur depasse la taille maximale
        dH = this.maxHeight;
        // On recalcule la taille proportionnellement
        dW = parseInt((w * dH) / h, 10);
      } else if ((h < this.maxHeight) && (w > this.maxWidth)) {
        // Si la largeur depasse la taille maximale
        dW =this.maxWidth;
        // On recalcule la taille proportionnellement
        dH = parseInt((h * dW) / w, 10);
      }
      
      // On ecrit l'image dans le document
      // Récupération de l'objet conteneur
		var conteneur = document.getElementById(oImg.conteneur);
		// On test si l'objet a bien été récupéré
		if(conteneur)
		{
		  // On met la taille à l'objet Image
		  oImg.width = dW*2;
		  oImg.height = dH*2;
		  // On ajout l'image à la fin du conteneur
		  conteneur.appendChild(oImg);
		}
    }
  }
  // Affectation du chemin de l'image a l'objet
  oImg.src = inImg;
};


Mon appel de fonction entre <body> et </body> : 

<div id="monConteneur" class="cadre_photo">
    <script type="text/javascript">
    <!--
        redimImage('photos_etablissements/etablissement_<%=id%>.jpg', 110, 90, 'monConteneur');
    //-->
    </script>
</div>
0
Réponse 13 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
14 févr. 2008 à 17:15
Je pousse un grand OUUUUUUF !!!!!

Mon erreur était dans ma feuille de style. En effet le <div id="monConteneur" class="cadre_photo"> était lui même dans un <span> dont la largeur était définie comme fixe et était inférieur à la largeur maxi de l'image à afficher.

En espérant que ce fût bien ça. En tout cas, cette fois, j'ai testé la page une bonne centaine de fois pour être sûr :)

Mais le problème était bien la fonction javascript qui était mal obtimisée, donc ton aide ne m'aura pas été inutile. En fait j'avais deux erreurs (un dans le css et un dans le JS).

Je peux maintenant remettre le poste en "résolu" (enfin j'espère lol)

Chussss !
0
Réponse 14 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
14 févr. 2008 à 17:26
Et dire que j'étais en train de me prendre la tête pour trouver d'où venait le problème...

Heureusement que ça vient du CSS et pas de ma fonction : mon ego allez en prendre un coup sinon pp
0
Réponse 15 / 19
Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
15 févr. 2008 à 10:15
héhéhé, vraiment désolé GallyNet. J'espère qu'un jour je pourrais me prendre la tête pour toi à charge de revanche.
Même si j'ai quelques doutes lol.

En tout cas je le répète, merci encore pour le temps que tu a passé à m'aider.

A+++
0
Réponse 16 / 19
Ad
30 sept. 2008 à 17:00
Pour ma part, cela ne marche pas.

- Soit cela m'affiche l'image seul dans la page.

- Soit pas au bonne endroit.

Je n'ai pas utilisé de conteneur, car si j'utilise un conteneur je peux pas afficher plusieurs images.

Donc il n'y a aucun moyen fiable ?
0
Réponse 17 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
2 oct. 2008 à 09:03
Holà, ça fait longtemps cette discutions.

Pour ce qui est d'avoir un moyen fiable : il faut bien savoir que l'on est en JavaScript, on est donc loin d'être sûr de ce qu'un script va faire.

Par contre, il est bien possible d'afficher plusieurs images dans le même conteneur. La fonction fait un appendChild, ce qui ajoute l'image courante à la suite des autres images.
0
Réponse 18 / 19
Ad
2 oct. 2008 à 10:37
Justement , j'ai une sorte de blog, donc c'est pour chaque post, donc il me faut un conteneur différent ...

mais j'ai trouvé une solution en css , max-width:600px allier à width : expression(Math.min(this.width, 600));
ca marche très bien, des fois il vaut mieux faire un truc simple que chercher le compliqué
0
Réponse 19 / 19
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
2 oct. 2008 à 11:05
Effectivement, si avec juste un peu de CSS tu obtient ce que tu veut, y'a pas besoin d'aller chercher plus loin.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses