Posted by Philip on 06/23/06 14:03

In article <V_GdnTMTG4wqPQbZnZ2dnUVZ8qqdnZ2d@scarlet.biz>,
Nikko <dummy@dummy.com> wrote:
> jojo wrote:
> > Nikko 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">

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.

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">

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

HTH

--
Philip
http://NikitaTheSpider.com/
Bulk HTML validation, link checking and more

[Back to original message]