Hi,
Thanks for your suggestions. I just tested:
img { max-width: 150px; max-height: 120px; }
but this does not work properly in Chrome and FF3.
For example:
> an image with 200x100 is resized to 150x100 (distortion)
> an image with 150x150 is resized to 150x120 (distortion)
I better keep using my PHP script to calc the proper image styles.
For example:
> an image with 200x100 is resized to 150x75 (without distortion).
Thanks anyway, Cor
----- Original Message -----
From: [email protected]
To: [email protected] ; [email protected]
Sent: Friday, March 06, 2009 2:09 PM
Subject: Re: [css-d] how to auto-resize images with CSS ?
Hi Cor,
I'm guessing you mean you have say, an image 110x80px or 100x90px and the
maximum width of both could be 100 or high could be 80 and it would resize
accordingly?
Maybe you could use max-width and max-height values?
CSS:
img {
max-width: 80px;
max-height: 100px;
}
I don't know if this would work and it's not compatible with IE6.
Either that or Javascript!
http://www.w3schools.com/css/pr_dim_max-width.asp
Ta,
~Mx
http://www.mxdx.co.uk
On Mar 5, 2009 7:41am, [email protected] wrote:
> Hi All,
>
>
>
> I have multiple images with different widths and heights
>
> and want to display these images as max. 100x80 pixels,
>
> without width/height distortion.
>
> So either the max. width 100 or the max. height 80
>
> should be used for resizing.
>
> Can this be done automatically with CSS ?
>
>
>
> TIA, Cor
>
> ______________________________________________________________________
>
> css-discuss [[email protected]]
>
> http://www.css-discuss.org/mailman/listinfo/css-d
>
> List wiki/FAQ -- http://css-discuss.incutio.com/
>
> List policies -- http://css-discuss.org/policies.html
>
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
