6 svar · 435 visningar · startad av syrolis
Undrar om man kan begränsa en bilds storlek utan att förstora små bilders storlek?
Infogar länkade bilder via databas i en tabell och bilderna är olika stora.
Skulle kunna sätta width på tex 200 men det skulle förstora små bilder så de ser pixlade ut även om det skulle göra susen på bilder som är tex 400 i originalstorlek.
Finns det något alternativ i HTML-koden?
Att små bilder visas i originalstorlek och stora bilder sätts en gräns på 200pixlar i bredd?
Någon som förstår vad jag är ute efter?
Här har jag en väl fungerande lösning liggandes, där du dessutom kan ställa in maxhöjd och maxbredd individuellt.
<script>
var maxwidth = 200;
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="centerbg/warp.jpg" onload="fixImgSize(this)" />
zcorpan: din kod kan jag använda den tillsammans med nitro2k01 kod?
Eller måste allting skrivas om? *förlägen* kan inte så mycket om det här :-)
Här är en kombination, om du absolut vill kombinera metoderna.
<style type="text/css">
img.imgclass { max-width:200px; height:auto; }
</style>
<script>
var maxwidth = 200;
var maxheight = 200;
fixImgSize=null;
if (window.sidebar || window.opera){
document.write('<style type="text/css"> img.imgclass { max-width:200px; height:auto; }</style>');
fixImgSize = function(){};
}else{
fixImgSize=function(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="centerbg/warp.jpg" class="imgclass" onload="fixImgSize(this)" />
En kommentar på zcropans lösning, den funkar väl inte för för höga bilder, bara för för breda, eller?
Så här skrev nitro förra gången (till mig):
nitro2k01 skrev:
Detta javascript ändrar bilden lokalt. Det gör att om bilden är för stor kommer den att flimra till precis innan storleken ändras.
Om det är någon som har ett annat förslag som också fungerar i IE (inte bara jag, utan också 90% av våra kunder använder IE på Windows) utan att flimra, så hojta till! :)
Mvh
En kommentar på zcropans lösning, den funkar väl inte för för höga bilder, bara för för breda, eller?
Oj, hade missat den detaljen. Trodde det bara skulle gälla för bredden. ;)
img { width:auto; height:auto; max-width:200px; max-height:200px; }
...eller det kanske till och med räcker med:
img { max-width:200px; max-height:200px; }