4 svar · 334 visningar · startad av @nders
Hej!
Jag har en bild som ska visas, men den får inte visas i ett mått bredare än 140px.
Alltså; om bildens bredd är större än 140 pixlar, så ska den skalas ner vid visning till 140px. Om bilden är mindre skall den visas i originalstorlek.
Några idéer om hur jag ska bära mig åt?
Mvh och tpf
#bilden { max-width: 140px; }
...
<img id="bilden" src="bilden.png" alt="Bilden" />
Fungerar det? Här finns mer att läsa om max-width och IE.
Fast jag hade nog använt mig av något PHP-script som räknar ut höjden/bredden och skalar om bilden när den laddas upp.
Alternativt (om det är okej att beskära bilden) kan du lägga bilden som en bakgrundsbild i en DIV.
Detta javascript ändrar bilden lokalt. Det gör att om bilden är för stor kommer den att flimra till precis innan storleken ändras.
Den ändrar storleken på bilden och behåller höjd/bredd-skalan. Max-höjd och bredd kan sättas individuellt.
var maxwidth = 500;
var maxheight = 200;
function fixImgSize(th){
var wratio = maxwidth / th.width;
var hratio = maxheight / th.height;
if (wratio <1 || hratio <1){
if (wratio<hratio){
th.width *= wratio;
}else{
th.height *= hratio;
}
}
}
</script>
<img src="bild.jpg" onload="fixImgSize(this)">
Jag är ledsen att jag inte återkommit om detta, har helt enkelt glömt bort att jag ställt frågan...
Gislaved; ditt exempel fick jag inte att fungera, men jag funderar på att installera någon asp-komponent för att beskära bilderna till thumbnails som du nämner. Det är klart att det är det bästa alternativet, men det finns ju ingenting sådant inbyggt i asp, så då får man leta komponent.
nitro: tack för förslaget, men bilderna är alltid för stora, och flimmer går bort. :)
Mvh
Om bilden alltid är för stor är det ju inga problem. Kör med
#bilden { width: 140px; }
...
<img id="bilden" src="bilden.png" alt="Bilden" />
Jag vet att det är en gammal tråd, men jag missade att @nders hade svarat. :)