Resize picture with css

[RFH Reseller: SKILLIT]

I have an image http://bookholidayrentals.com/Pics/020641.jpg
which is 320 x 240 pixels

I want to display it slightly larger by specifing width and height percentages but even 102% gives something way to big.

It seems that if I specify:
.pic {
width:94%;height:94%
}

That I get the picture display as I want with properties of 353 x 264 [IE8]pixels.

Can anyone explain to me why?

Note: FF & IE8 give results a few picels different : FF: 320px × 232px (scaled to 353px × 256px).

[RFH Reseller: Rappie]

How about just setting the size properties in pixel?

.pic {
width:353px;
height:264px;
}

I have an image http://bookholidayrentals.com/Pics/020641.jpg
which is 320 x 240 pixels

I want to display it slightly larger by specifing width and height percentages but even 102% gives something way to big.

It seems that if I specify:
.pic {
width:94%;height:94%
}

That I get the picture display as I want with properties of 353 x 264 [IE8]pixels.

Can anyone explain to me why?

Note: FF & IE8 give results a few picels different : FF: 320px × 232px (scaled to 353px × 256px).

[RFH Reseller: SKILLIT]

The picture could have different dimentions and even be portrait - so using a percentage should keep the aspect ratio.

It would appear that the percentage actually applies to the container and not the image so I need to try a few more things.

Thanks David.

[RFH Reseller: nick]

The picture could have different dimentions and even be portrait - so using a percentage should keep the aspect ratio.

It would appear that the percentage actually applies to the container and not the image so I need to try a few more things.

Thanks David.

Yep, the CSS percentage will be a percentage of the parent element's width, and nothing to do width the image.

It's really still JavaScript that you want to use to achieve this, when you can't assume the original image size. Should be pretty easy...