---
title: "Begränsa bilds storlek"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/127541-begränsa-bilds-storlek"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "syrolis"
published: "2005-05-03T13:56:45.000Z"
updated: "2005-05-03T18:06:47.000Z"
replies: 6
views: 450
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/127541-begränsa-bilds-storlek"
---

# Begränsa bilds storlek

## #1 — syrolis, 2005-05-03T13:56Z

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?

Permalänk: https://www.webforum.nu/p/127541

## #2 — nitro2k01, 2005-05-03T14:05Z

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)" />
```

Permalänk: https://www.webforum.nu/p/1605291

## #3 — zcorpan, 2005-05-03T14:25Z

För Opera och Firefox kan man använda: 

```
img { max-width:200px; height:auto; }
```

Permalänk: https://www.webforum.nu/p/1605304

## #4 — syrolis, 2005-05-03T17:32Z

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

Permalänk: https://www.webforum.nu/p/1605427

## #5 — nitro2k01, 2005-05-03T17:39Z

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?

Permalänk: https://www.webforum.nu/p/1605429

## #6 — @nders, 2005-05-03T17:44Z

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

Permalänk: https://www.webforum.nu/p/1605431

## #7 — zcorpan, 2005-05-03T18:06Z

> 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; }
```

Permalänk: https://www.webforum.nu/p/1605439

---

Tråden på webben: https://www.webforum.nu/amne/html-css/127541-begränsa-bilds-storlek