[Mr.Notepad]

Hej

Detta är kanske ett enkelt problem att lösa för den som kan, men det måste nog vara ett ganska vanligt problem.

Det handlar om att visa en bild som "icke förvrängd" miniatyr, utan att skapa en ny bildfil och utan att i förväg veta bredd x höjd.

Låt oss säga att jag vill visa bilder av olika format i en yta som är 50 x 50 pixel där vissa kan vara höga och smala vertikalt medan andra kan vara avlånga horizontellt.
Då kan man inte sätta width="50" eller height="50" eftersom någon av de utdragna formaten blir ihoptryckta på fel håll. (Hoppas ni förstår vad jag menar)

Min fråga är alltså hur man enklast löser detta... utan att skapa extra miniatyrer (Det är inte ett alternativ i mitt fall) och utan att bygga "speciella php-lösningar". Jag kör html och ASP, med diverse javascript.

Jag skulle gärrna se en lösning där man helt enkelt tala om att "max width = 50" och "max height = 50" så att bilden visas förminskad där den längsta sidan blir 50 och den kortare visas i rätt proportion till originet.
(Så en bild som är 300 bred och 100 hög, visas som 50 bred x 17 hög)

Några bra lösningar för detta problem?

[nosnaj]

Du kan ju hämta storlek med javascript och sen ändra width och height till rätt värden.
Det är enligt mig dock varken bra eller rätt fast du har säkert dina anledningar att inte göra om bilderna innan

[tartareandesire]

Den enda bra lösningen är just att göra miniatyrer per automatik. Har man extremt många bilder som visas ganska sällan kan man ju alltid radera med ett script för att spara lite utrymme.

Alternativet, ett dåligt sådant, är att läsa in bildens proportioner på valfritt sätt och därifrån räkna ut korrekta mått för visning. Du får då kontrollera om höjden eller bredden är störst på respektive bild.

[Mr.Notepad]

Ursprungligen postat av tartareandesire

Den enda bra lösningen är just att göra miniatyrer per automatik. Har man extremt många bilder som visas ganska sällan kan man ju alltid radera med ett script för att spara lite utrymme.

Nej, det är inget alternativ och vi pratar inte om "lite utrymme".
Vi pratar om antal filer med 7 siffror med tusentals nya bilder varje dag.
Att skapa miniatyrer för miljoner bilder som ändå bara ska visas i ca 10-20% av originalstorleken och bara 10-20 st per sida är inte en bra lösning i detta fall tyvärr. Varken utrymmesmässigt, backuphänseende eller prestanda.

Däremot så är alternativet som "tartareandesire" nämner precis det jag söker, men jag hoppas att det finns en färdig script-lösning.
Alla "lightbox-script" har ju löst problemet med att visa originalbilder i mindre format utan att skapa dubbletter av alla filer. (Ni vet de där popup-albumen som visar fotografier ovanpå en sajt med framåt, bakåt och stäng-knappar)

Om jag fattat rätt så kan man inte använda CSS-koden Max-width och Max-height för detta.

[taz76]

använd lite serverkod för att generera miniatyrer =) finns säkert färdiga små scripts både för php och asp.net ute på det stora nätet om du inte kan koda själv.

[akelagercrantz]

Ursprungligen postat av Mr.Notepad

Om jag fattat rätt så kan man inte använda CSS-koden Max-width och Max-height för detta.

I princip, men det är lite halvtaskigt med webbläsarstöd för max-width & max-height: http://reference.sitepoint.com/css/m...ibilitysection

Tänk på att du slösar ganska rejält med bandbredd om du slevar upp stora bilder i onödan. Tror att många i tråden syftar på att du ska generera miniatyrer "on the fly".

Du skapar ett script (i valfritt serversidespråk) som läser in en bild från request-urlen, skalar om den och returnerar en miniatyr. De välbesökta bilderna kan du cacha så går det snabbare. På så sätt behöver du inte generera miniatyrer för varenda bild, utan bara för dem som du faktiskt visar för besökarna.

[Mr.Notepad]

Bandbreden och laddningstid är inget problem eftersom varje sida visar max 30 miniatyrer och originalbilderna är inte större än max ca 500 x 500. (Det hade varit värre om det varit bilder på 4000 x 3000 pixel som ska visas som 50 x 50)
Däremot är det många besökare och sidvisningar varje dag.

En av orsakerna till att jag inte vill skapa miniatyrer som dubbletter, är att jag vill visa mindre bilder men i olika format på olika platser på sajten. Så i praktiken skulle varje bild behöva 4-5 minitayrer vilket inte är en lösning för mig.

Idén med realtidsgenererade bilder låter som en annan variant av skapandet av dubbletter men mer prestandakrävande.

[akelagercrantz]

Funktionen i det script du hittade tar en parameter: function resize(id)

När du kallar skriptet skickar du med ID såhär: onload="resize(this.id)"

Problemet är att dina bilder har samma ID.
<img id="image" ... >
<img id="image" ... >

Sätt ett unikt id för varje bild så borde det fungera.

[akelagercrantz]

En godtycklig jpg jag komprimerade med quality 70 i Photoshop, storlek 500x500px är på 15kb. Samma bild, fast i 50x50 är på 900b.

Skillnad i storlek per sidvisning blir 420kb ( skillnad 14kb * 30 bilder ). Det blir en del extra bandbredd om du har många sidvisningar / dag.

Visst är det mer resurskrävande att generera bilder i realtid, men om du implementerar en godtycklig cache borde det inte vara några problem. Då kan du också generera vilka storlekar du vill.

[Mr.Notepad]

Jag lyckades till slut få exakt den hjälp jag bad om... ( på annat håll )
...men om någon annan kan ha nytta av denna kod så ska jag mer än gärna dela med mig av den eftersom jag hittat massor av andra likadana frågor via google.

Jag tackar alla ni som läst och försökt hjälpa mig!

Här är den fungerande koden:

<head>
<script>
function resize98(element){
var img = element;
if (img.width > img.height){
img.width = "98";
} else {
img.height = "98";
}
}
</script>
</head>

<img src="bild1.jpg" onload="resize98(this)">
<img src="bild2.jpg" onload="resize98(this)">
<img src="bild3.jpg" onload="resize98(this)">
...osv

Visade bilder blir max 98 hög eller max 98 bred och bilden behåller sin rätta "aspect ratio" oavsett om det är liggande eller stående bild!