Posted by jojo on 06/25/06 21:42

Philip schrieb:

>>>> Hi,
>>>> Is it possible to do this with css?
>>>> I want to limit height image to a certain value:
>>>> If the original image's height is larger than desired value, show
>>>> image with height equals to desired value.
>>>> If the original image's height is smaller than desired value, do
>>>> nothing and show image with this original height size.
>>>>
>>>> thank in advance for your help.
>>>> Nikko
>>> img {max-height:50px;}
>>>
>>> But it doesn't work with all browsers... I do not know which browsers do
>>> support max-height and which do not. But AFAIK ie doesn't support it yet.
>> Thanks for your answer
>> Yes, you're right, I tried max-height, and it works with firefox but not IE.
>> Do you know a max-height workaround for IE with img tag?
>
> You can simply set the height as an attribute of the image element:
> <img src="foo.jpg" height="50">

I'm sorry, but i have to correct you: Nikko wanted the image not to be
scaled if it's smaller than the desired value, but this would always
size it 50px, no matter what the original size is.

>
> But I think that will not preserve the aspect ratio (i.e. your pictures
> will look squashed), not to mention the scaling problems mentioned
> earlier in this thread.

Right, but this problem doesn't depend on how you scale it, just the
fact *that* you scale it will do it.

>
> If you're using a scripting language to build these pages, you can
> probably use some functions to get the dimensions of the image and then
> set the height and width accordingly on the image tag. e.g. if your
> image is 300x500, you could write an image tag like so:
> <img src="foo.jpg" width="30" height="50">

Yes, would be a solution. Can do it both, on server-side (PHP for
example) or client-side (JavaScript).

>
> That would preserve the aspect ratio.
>
> FYI, top posting often makes people in this group less inclined to help.
> Here's a reference in case you're unfamiliar with it:
> http://en.wikipedia.org/wiki/Top_posting

Always the same... ;-)

>
> HTH
>

[Back to original message]