IMG WIDTH/HEIGHT vs HTML

[s9d8as0vjk]

Jag har tänkt direktlänka in en massa bilder so thumbnails på en hemsida men tyvärr stöter jag på ett problem.

Bilderna som jag tänkt direktlänka in är av varierande storlek pixelmässigt så det ställer till en del bekymmer då jag dom max får vara 60 pixels breda och höga på min sida. En del bilder är höga som fan och andra är breda som fan ...

Finns det något smart sätt att få bilderna att bli max 60 pixels ? Om man kör WIDTH="60" HEIGHT="60" så blir ju proportionerna helt skumma ...

Hilfe bitte !

 

[korvgubbe]

2431553

Hilfe bitte !

Om bilderna får vara max 60 breda så sätter du width till 60. Skippa height helt så behåller du proportionerna. Tyvär får du då leva med att vissa bilder högre än de andra.

Alternativet är att skapa tumnaglar där du beskär alla bilder så du får samma proportioner.

 

[Swedie]

använder du php kan du skala efter % av bredden. Så om en bild är 80 x 60 så blir den ju 60 x 40 efter skalning. men det kräver vissa resurser från servern så det är inget du ska använda som laddas jätteofta. istället vid uppladdning borde du istället skala om bilderna direkt.

 

[Mojje]

2431553 ...

Finns det något smart sätt att få bilderna att bli max 60 pixels ? Om man kör WIDTH="60" HEIGHT="60" så blir ju proportionerna helt skumma ...

Hilfe bitte !

Som tidigare talare redan sagt så vore det nog smartare att skala om bilderna så de är i rätt storlek.

Jag har använt mig av Paint Shop Photo Album (JASC) där man kan köra batchjobb för att ändra storlek på bilder. Man säger vilken maxhöjd och maxbredd bilderna får ha, sedan är det bara att luta sig tillbaka och låta PCn jobba

P.S. JASC har visst blivit uppköpta av Corel.
http://www.corel.com/servlet/Satellite?pagename=CorelCom/Layout&c=Product_C1&cid=1152105040719&lc=en
D.S.

//Mojje

 

[korvgubbe]

2432393
Jag har använt mig av Paint Shop Photo Album (JASC) där man kan köra batchjobb för att ändra storlek på bilder.

Har man photoshop kan man skapa droplets och batchapplikationer med några enkla handgrepp. Då kan man passa på att ställa in justereing av nivåer och anpassa bildupplösningen för att passa visning på webb när man ändå ska ändra storleken på bilderna.
Enkelt att skapa två droplets. En för tumnaglar och en för visningsbilder.

 

[s9d8as0vjk]

Tack för tipsen men jag vill alltså använda befintliga bilder som finns på andra webservrar. Vill alltså inte lägga upp bilderna på min egen server ... om jag hade velat det så kan man ju lätt anpassa storleken på bilderna.

Som jag sa tidigare så kan en del bilder vara riktigt höga och en del riktigt breda och målet är att dom aldrig ska bli större än maxstorleken 60*60

Men det kanske inte går att använda WIDTH & HEIGHT på det sättet. Tänkte att det ev skulle kunna funka om man blandade in en tabell eller liknande.

 

[korvgubbe]

2432632 . Tänkte att det ev skulle kunna funka om man blandade in en tabell eller liknande.

Tabeller anpassar sig efter innehållet så om bilden är större än 60*60 så kommer tablen bli det den med.

Det är möjligt du kan använda javascript eller så för att anpassa storleken dynamiskt beroende på hur stor bilden är men enklast är nog om du nöjer dig med att få max 60 på ena ledden.

Du skulle iofs kunna skapa en struktur med tables där varje cell är 60*60 och har respektive bild som bakgrund i cellerna. Då blir varje ruta exakt rätt storlek men å andra sidan kommer du inte få tumnaglar utan en beskuren version av orginalbilden där du ser 60*60 av övre vänstra hörnet på bilden.

 

[jayjay]

Det är fullt möjligt att göra med javascript. Har du aldrig sysslat med javascript kan det dock upplevas lite oförståeligt.

ett exempel:

<script type="text/javascript">

	function resizeImg(imgEl) {
		var width = imgEl.width;
		var height = imgEl.height;
		
		var newWidth, newHeight;
		
		if( width > height ) {
			// bredden är högre än höjden, sätt maxbredd 60 och höjden proportioneligt till bredden.
			newWidth = 60;
			newHeight = 60 * height/width;
		} else if( width < height ) {
			// höjden är större än bredden. Sätt höjd = 60 och bredden proportioneligt till höjden.
			newHeight = 60;
			newWidth = 60 * width/height;
		} else {
			//Den är kvadratiskt, sätt höjd och bredd till 60.
			newHeight = 60;
			newWidth = 60;
		}
		
		imgEl.width = newWidth;
		imgEl.height = newHeight;
		
		// visa bilden när storleken är satt.
		imgEl.style.display = '';
	}	


</script>

<img src="http://länken/till/bilden/såklart" onload="resizeImg(this)" style="display: none" />

style="display: none" innebär att bilden är dold, dvs inte renderad. När bilden laddad och är omsizead, så kommer den visas med koden:

imgEl.style.display = '';

Detta för att ta bort att den flimrar till i full storlek.

onload-eventet triggas när bilden laddats klart, då vet också browsern om dimensionerna på bilden. Så det du behöver lägga till på varje bild är onload="" och style="" på varje imagetag, och scriptet lägger du lämpligtvis där script bör ligga, mellan <head> och </head> blocket =)

 

[s9d8as0vjk]

Jayjay, fan det där vore ju guld om jag kunde få igång ... dock verkar det inte funka rakt av.

Alla bilder blir exakt 60*60 när jag bara pastar in ditt script. Det verkar inte som det kan känna av bildens storlek.

Kika här hur det ser ut (modifierat script)
http://www.fiskesnack.com/productsearch/index2.php

Välj exempelvis butik www.sportfiskebutiken.se, välj sedan "Visa bilder" i menyn. Då ser du att alla bilder är kvadratiska

Om du sedan testar (omodifierat script) så ser du skillnaden
http://www.fiskesnack.com/productsearch/index.php

Kan man på nåt enkelt sätt se om JavaScriptet får in orginalstorleken på bilden ?

/ JavaScript-newbien

 

[jayjay]

Okej, IE fattade tydligen inte hur stor bilden var, om den har display: none. Detta trots att den faktiskt requestar bilden från servern oavsett display-style.

En workaround är att strunta i att påverka display-stylen alls, men då kommer alla bilder flimra till i stor storlek innan den resizear om den.

En bättre lösning är att byta ut:

var width = imgEl.width;
var height = imgEl.height;

Mot detta:

var img = new Image();
img.src = imgEl.src;
var width = img.width;
var height = img.height;

Som skapar ett nytt imageobjekt utifrån samma källa, laddar in bilden, men som inte renderas på sidan.

Detta skapar _INTE_ dubbla request i firefox, men i IE så requestas den två ggr (dock med status 304, not modified andra gången)

 

[jayjay]

Kom på en annan lösning, som kanske är bättre (de som du hotlinkar bilderna ifrån kanske blir sura när alla dina användare gör dubbelrequests till bilderna, även om de bara laddas ner en gång).

<script type="text/javascript">

	function resizeImg(imgEl) {
		
		var width = imgEl.width;
		var height = imgEl.height;
		
		var newWidth, newHeight;
		
		if( width > height ) {
			// bredden är högre än höjden, sätt maxbredd 60 och höjden proportioneligt till bredden.
			newWidth = 60;
			newHeight = 60 * height/width;
		} else if( width < height ) {
			// höjden är större än bredden. Sätt höjd = 60 och bredden proportioneligt till höjden.
			newHeight = 60;
			newWidth = 60 * width/height;
		} else {
			//Den är kvadratiskt, sätt höjd och bredd till 60.
			newHeight = 60;
			newWidth = 60;
		}
		
		imgEl.width = newWidth;
		imgEl.height = newHeight;
		
		// visa bilden när storleken är satt.
		imgEl.style.visibility = 'visible';
		imgEl.style.position = 'static';
	}	
	
	

</script>


<img src="bild.jpg" onload="resizeImg(this)" style="visibility: hidden; position: absolute"  />

 

[s9d8as0vjk]

Tjohoo ! Det där sista scriptet fungerade kanon !

Tack så in i helvete !