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

caviar

WRInaute occasionnel
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

@++
 

caviar

WRInaute occasionnel
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
 

caviar

WRInaute occasionnel
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());
 }
 

patapon87

WRInaute passionné
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....

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
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 ;-)
 

patapon87

WRInaute passionné
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
 

caviar

WRInaute occasionnel
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

:'(
 

patapon87

WRInaute passionné
Non mais il faut que tu reprennes ce que tu nous dis parcque ça ne va 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

Alors que plus haut tu as dit :
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

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:
 

Toma

WRInaute discret
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.
 

caviar

WRInaute occasionnel
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());
 }
 

Discussions similaires

Haut