images maximal width

[d-machine]

Hi,

I have few images that I should display in my site and I don't know the original width of the images (they are changing dynamically).

My problem is that I have specific width to the place the images should be published (530px).

How can I resize (by CSS) all the images, that their widths are bigger than 530px? (I want that the images will be resized also by the proposional height)

For example if some image is 1060px*200 it will resize it to 530*100.

If you have any other idea using PHP it will be appreciated as well :)

Thank you very much.

[TheJoshMan]

This is done easily enough with CSS... Simply define an absolute value for the width (530px), then define the height as "auto". This will ensure that the image is resized while keeping the correct pixel aspect ratio.




img {
width:530px;
height:auto;
}


However, the code above will resize ALL images on your page. I would suggest using a div or some sort of container to place the images in (which I'm assuming you already have if you have a set width that they need to be), once you have a container in place for the images, give it a "class" or "id" then specify ONLY images within that class or id with the code above...

Like this:



.image_container img {
width:530px;
height:auto;
}



Then the HTML:


<div class="image_container">
<img src="yourimage.jpg">
</div>

[d-machine]

First of all, Thank you very very much !! :)
However, what should I do if the width of the image is already smaller than 530px?
I don't want it to be re-sized to 530px

[gwmbox]

You could try



img {
max-width:530px;
height:auto;
}


max-width as that is what I have used but from what I can tell IE does not like max-width (or is that just IE6 - I forget) though there is a work-around



img {
max-width:530px;
width:expression(document.body.clientWidth > 530? "530px": "auto" );
height:auto;
}


Hope that helps

[d-machine]

Thank you very much, but it is still resizing the smaller images on IE.

[gwmbox]

OK it must be an IE6 thing as



img {
max-width:530px;
height:auto;
}


works for FF3 and IE7, then make a separate CSS file and add an if IE6 (or below) condition in your HTML



<!--[if lte IE 6]>
yourie6cssfile.css
<![endif]-->


and set the style in that css file to



img {
width:expression(document.body.clientWidth > 530? "530px": "auto" );
}


Hope that works

[d-machine]

I'm sorry but this is just the same..

[gwmbox]

Hmm - seems like an older IE issue - I can get it to work in IE 7 and FF2, FF3 and Google Chrome...

If I can work it out I'll get back to you - unless someone else wants to enlighten us :)

Cheers

[gwmbox]

Ok got it and has been tested on IE6



img {
max-width:530px !important;
max-height:530px !important;
/* Resize the image for IE6 */
width: expression(this.width > 530 ? 530: true);
height: expression(this.height > 530 ? 530: true);
}


See test here http://dogsites.com.au/pick-up/tester.html

Cheers