[SOLVED] making an image fit a division

[frankie]

i have to place an image that is randomly selected in a division. size of the division is constant, but since the images are different shape and size i am having a problem. how can i set a maximum height and maximum width to the image so that it fit the div holder and the images keep their height-width ratio.

[MadnessRed]

I think you will need php

 

//Max dimentions
$maxwidth = 400;
$maxheight = 400;
$url = 'img/image.jpg';
//Get image info
$image = getimagesize('img/image.jpg');
//If image is too wide, change the dimentions
if($image[0] > $maxwidth){$image[0] = $maxwidth; $image[1] *= ($maxwidth/$image[0]); }
//If image is to heigh, (still, even after resizing the width) change dimentions aswell
if($image[1] > $maxheight){$image[1] = $maxheight; $image[0] *= ($maxheight/$image[1]); }

And output
echo '<img src="'.$url.'" width="'.$image[0].'" height="'.$image[1].'" />';

 

[frankie]

^{.mainimage {}

  ^{max-width: 400px;}

  ^{max-height: 400px;}

  ^{width: expression(this.width > 400 ? "400px" : true);}

  ^{height: expression(this.height > 400 ? "400px" : true);}

^}

 

^{<img class="mainimage" src="<?=$pictureurl?>" border=0>}

thx

i found this and it seems to work

http://www.fastechws.com/tricks/web/image-max-width-height.php

[haku]

Really bad coding though. First off you are limiting image size through css - which means the full sized image is still downloaded and just shrunk down. This takes up bandwidth on the server, and makes for slow loading times for the user. It's also using expressions, which are IE only.

[frankie]

thanks haku.

i am actually looking for a way of doing it in css because i do not want to change the image actuall size.

i want to use the same image with other css and different sizes. these images ar already reduced so there is no problem there.

also i thought he used the expressions because IE does not respond to  max-width value. what kind of problem can this present?