Un petit problème de matheux, ou d'amateur de casse tête

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par caviar, 17 Septembre 2012.

  1. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    Salut tout le monde ...
    Bon j'ai un problème de matheux ... et je n'arrive pas à trouver l'algo...ou comment faire
    j'utilise la librairie jquery

    voila, en simplifiant la problématique ça donne ça
    j'ai une div.imagecollection de 800px de large dans laquelle je peux faire apparaitre des images (avec un append)
    chaque image qui apparait peut avoir une largeur et une hauteur différente.
    certaines sont horizontales, d'autres verticales etc ...

    bon j'aimerai qu'à chaque nouvelle image chargée, toutes les tailles des images soient recalculées de façon à ce qu'elles aient toutes la même hauteur et qu'elles occupent la largeur maximale disponible dans mes 800px (sachant qu'en plus on a 5px de marge à droite pour chaque image)

    vous voyez le truc de dingue ... alors j'essaye de calculer de ratios et tout ça mais je trouve pas la logique ...

    si vous avez un pote prof de math ... lol
    thanks

    @++
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 194
    J'aime reçus:
    333
  3. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    salut
    merci, c'est sympa cet effet mais ça ne colle pas du tout avec ma problématique malheureusement ...
    c'est complexe en fait ... je m'arrache les cheveux avec des dessins et tout là ... la galère ... ou bien je suis nul en maths... ce qui est possible aussi
     
  4. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    Pour vous donner une idée j'en suis là mais ça marche pas

    Code:
     //resize les image dans un bloc images
     function sizeImgBlock (imagescolection) {
    		imgs = $(imagescolection).find('img');
     		nbimg = $(imgs).length;
    		
     		trace(imgs);
     		trace(nbimg);
     			
     		trace('maxw=' + maxw); //largeur  de ma div containeur
     		trace('maxh=' + maxh); //hauteur de ma div containeur
    
     		maxratio = 0;
    			
     		$.each(imgs, function (index, value) {
    		
    			//on cherche l'image la plus large		
    			w = parseInt($(this).width());
    			h = parseInt($(this).height());
    			
    			
    			ratioh = h/w; //la hauteur = x fois la largeur
    			
    			
    			if ( ratioh > maxratio ) {
    				maxratio = ratioh;
    				trace ('ratioh='+ratioh);
    				trace ($(this).attr('id')+' '+w+' '+h);
    				
    				//hauteur finale maximale de la div containeur
    				hmax = maxw * maxratio ;
    				trace ('hmax='+hmax);
    				
    				wration = maxw / hmax ;
    				trace ('wration='+wration);
    			}
    
    			
     		});
    		
    		$.each(imgs, function (index, value) {
    					//$(this).css('width', parseInt((maxw / (nbimg)) - (5 * (2 - 1))));
    					
    					w = parseInt($(this).width());
    					h = parseInt($(this).height());
    					
    				trace ('w='+w);
    				trace ('h='+h);
    			
    				localratio = w / h ; //ratio de mon image
    				
    				//resize des miages
    			
    				$(this).css('height', parseInt(hmax / ( localratio)));
    				$(this).css('width', '');
    			});
    		
    		
     	//	$(imagescolection).css('height', $(imagescolection).find('img').height());
     }
     
  5. patapon87
    patapon87 WRInaute passionné
    Inscrit:
    12 Janvier 2010
    Messages:
    1 135
    J'aime reçus:
    0
    Tu as un problème dans ce que tu nous dis je pense ou alors il n'y a pas de problèmes de maths....

    Si tu veux qu'elles aient toute la même hauteur alors que les largeurs sont variables :

    - tu calcules la hauteur de la plus grande
    - tu mets toutes les images sur cette hauteur
    - si les images font plus de 800 de largeur tu calcules pour le réduire le width...

    Après si il faut que cela respecte le ratio original c'est différent mais tu ne le dis pas dans ta phrase ;-)
     
  6. patapon87
    patapon87 WRInaute passionné
    Inscrit:
    12 Janvier 2010
    Messages:
    1 135
    J'aime reçus:
    0
    Si tu dois respecter le ratio, à moins que je me trompe tu calcules le ratio à la base en faisant hauteur/largeur, ça te donne une valeur z.

    Pour connaitre la taille de ta largeur maxium connaissant ton hmax et ton z tu fais juste hauteurmax/ratio et ça devrait te donner ta largeur maximum en conservant le ratio
     
  7. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    ouaip, il faut que je conserve le ratio
    je vais chercher dans cette voie
    thanks ;)
    ++
     
  8. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    en fait ça marche pas

    tu calcules la hauteur de la plus grande
    - tu mets toutes les images sur cette hauteur

    Non, car elles ne vont pas occuper forcément la largeur totale du coup

    - si les images font plus de 800 de largeur tu calcules pour le réduire le width...
    c'est justement ce calcul que je ne trouve pas

    :'(
     
  9. patapon87
    patapon87 WRInaute passionné
    Inscrit:
    12 Janvier 2010
    Messages:
    1 135
    J'aime reçus:
    0
    Non mais il faut que tu reprennes ce que tu nous dis parcque ça ne va pas.


    Alors que plus haut tu as dit :
    Ca plus le problème de ratio où tu n'es pas clair.... il faut que tu sois d'accord avec toi même avant :wink:
     
  10. Toma
    Toma WRInaute discret
    Inscrit:
    18 Janvier 2006
    Messages:
    217
    J'aime reçus:
    0
    Comme l'a bien vu patapon87, il y a clairement une contradiction dans ton cahier des charges :

    même hauteur + même largeur (800px) + ration conservé => impossible

    Donc il faut que tu enlèves une des trois contraintes pour pouvoir trouver une solution.
     
  11. patapon87
    patapon87 WRInaute passionné
    Inscrit:
    12 Janvier 2010
    Messages:
    1 135
    J'aime reçus:
    0
    Ca revient à vouloir avoir un triange rectangle equilateral : impossible :)
     
  12. caviar
    caviar WRInaute occasionnel
    Inscrit:
    5 Septembre 2006
    Messages:
    325
    J'aime reçus:
    0
    Non, j'ai pas dit même largeur ...
    la largeur reste fonction du ratio de chaque image ;)
    au final j'ai trouvé la solution si ça peut aider qqun ;)
    ++ et merci pour les réponses ;)


    Code:
    
     //resize les image dans un bloc images
     function sizeImgBlock (imagescolection) {
     
    		imgs = $(imagescolection).find('img');
    		
    		$(imgs).removeAttr('style');
    		$(imgs).removeAttr('width');
    		$(imgs).removeAttr('height');
    		
    		
     		nbimg = $(imgs).length;
    		
    		trace ('-------sizeImgBlock------------');
     		trace(imgs);
     		trace(nbimg);
     		
    		maxw = $(imagescolection).width();
     		trace('maxw=' + maxw); //largeur  de ma div containeur
     		
     		grandeHauteur = 0;
     		LargeurTotale = 0;
     		total_ratio = 0;
    			
     		$.each(imgs, function (index, value) {
    			
    			trace ($(this));
    			
    			src = $(this).attr('src');
    			//on cherche l'image la plus large		
    			//w = parseInt($(this).width());
    			//h = parseInt($(this).height());
    			w = getImgWidth(src);
    			h = getImgHeight(src);
    			
    			trace ('w='+w);
    			trace ('h='+h);
    		
    			if (h > grandeHauteur) {
    				grandeHauteur = h ;
    			}
    				
     		});
    		
    		
    		trace ('grandeHauteur='+grandeHauteur);
    			
    		//j'ai la grande heuteur, je resize les images à cette hauteur pour calculer la largeur totale
    		
    		$.each(imgs, function (index, value) {
    		
    			
    				
    			trace ('--boucle largeur totale--');
    			trace ($(this));
    			
    		
    			ih = $(this).height();
    			iw = $(this).width();
    			trace ('ih='+ih);
    			trace ('iw='+iw);
    			
    			//$(this).width( ($(this).width() * ( ih / grandeHauteur) )  );
    			
    			ratiolocalh =  ih / grandeHauteur ;
    			trace ('ratiolocalh='+ratiolocalh);
    			
    			trace ('largeur de cette image si agrandie pour avoir la taille de la plus haute');
    			largagr = iw / ratiolocalh;
    		
    			//on resize ;
    			$(this).width(largagr);
    			$(this).height(grandeHauteur);
    			
    			trace ( largagr );
    			//largeur totale de la bande d'images si elles avaient toutes la hauteur de la plus haute
    			LargeurTotale = LargeurTotale + largagr;
    			
    		});
    		
    		trace ('LargeurTotale='+LargeurTotale);
    	
    		//ratio entre la largeur maximale et la largeur totale de la bande d'images
    		ratioLargeurs =  maxw / LargeurTotale  ;
    		
    		trace ('ratioLargeurs='+ratioLargeurs);
    		
    		//on resize toutes les images en foncion du ratio largeur
    		$.each(imgs, function (index, value) {
    		
    		
    			trace ('--boucle resize final--');
    			trace ($(this));
    			iw = $(this).width() ;			
    			ih = $(this).height() ;		
    			
    			nextw =  iw * ratioLargeurs ;
    			nexth =  ih * ratioLargeurs ; //grandeHauteur * ratioLargeurs
    			
    			trace ('iw='+iw);
    			trace ('nextw='+nextw);
    			trace ('nexth='+nexth);
    		
    			$(this).attr(  'width','' ) ;
    			$(this).attr(  'height','' ) ;
    			//je lève 5 px de marge
    			$(this).css('width',  parseInt(nextw) -5 ) ;
    			$(this).css('height', parseInt( nexth) -5 ) ;
    		
    		});
    		
    	
     		$(imagescolection).css('height', $(imagescolection).find('img').height());
     }
    
     
Chargement...
Similar Threads - problème matheux amateur Forum Date
Problèmes dans le méta-titre / description + Sitemap Référencement Google Lundi à 11:12
Problème paramétrage HTTP2 sur Nginx Administration d'un site Web 22 Novembre 2021
Search Console Problèmes réguliers d'ergonomie mobile sans modification Problèmes de référencement spécifiques à vos sites 18 Novembre 2021
Problème title/H1 thème Astra Problèmes de référencement spécifiques à vos sites 30 Octobre 2021
Search Console Problème avec page ads.txt Référencement Google 23 Octobre 2021
Problèmes avec OVH. Le café de WebRankInfo 8 Octobre 2021
Authentification forte : problème de paiement ? e-commerce 7 Octobre 2021
Multiples problèmes sur GA Google Analytics 28 Septembre 2021
Problème avec tag manager pixel Facebook Référencement Google 25 Septembre 2021
Problème d'indexation Google : que faire ? Crawl et indexation Google, sitemaps 21 Septembre 2021