limit image size

[Nikko]

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

 

[jojo]

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.

 

[Jonathan N. Little]

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.

Yes but don't. Please resample your images to the exact pixel dimension
you require. Scaling images rather than resampling them means that even
though they may appear smaller on the page you are still downloading the
*whole full-size* image. Secondly the rescaling done by the browser is
far poorer than the results from resampling the image, so it will look
bad as well. Nothing stalls a dialup connection more than a page full of
"thumbnails" that are 1000+ pixel images just scaled on the page!

 

[Nikko]

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?

 

[Nikko]

Hi jonathan, I agree completely with you but I can't change image size.

 

[Jonathan N. Little]

Nikko wrote:
Please don't top post.

Hi jonathan, I agree completely with you but I can't change image size.

Why not?

 

[Philip]

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

 

[jojo]

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... ;-)