max-height property

[aviemet]

So, I am making a very simple image gallery for my artist friend, and I'm using max-height with percentages to allow the current image to be smaller than the browser window, but keep scrollbars away if it's not. This works fine in Chrome and Safari, but has no effect in Firefox or Opera. (I don't want to test on IE yet)
example:

img{ max-height: 80%; }

I'm not stuck on this by any means, I just need a way to cap the image's dimensions. What bothers me is that max-height works for other elements like divs and the like, but not for imgs apparently.

I would really appreciate a solution, using any language really. I mean, CSS would be optimal because it tends to be simple, but I've got PHP and Javascript in this already, so anything will work.

Thanks.

 

[jnjc]

Can you post a url ?

 

[horrorshow75]

Just like any other images set your height and width perameters but use % instead of pixels.

<img src="" height="80%" width="100%" />

I'm at work so I can't actually test this but I don't see why it wouldn't work. You may want to keep your percentages the same for aspect ratio but you get the idea.

 

[aviemet]

Well, the idea is not to scale every image to itself, but to scale the image relative to the page so that if the image height is more than the height of the browser window, it scales to 80% of the browser window. And if it's not, then it displays at its full dimensions.

I guess I'll have to use Javascript and do some client height conditionals. I just really like the max-height property because it's so simple. Why do browsers have to interperate the same code differently?

The point here was to stay away from manual formatting so that I could just set this up and walk away. Right now, it's set up so that she just has to upload her pictures to a specific folder and they automatically are read by PHP and turned into links, then formatted by CSS to fit in the window, whether they're thousands of pixels high, or just a few hundred. I don't want to create a system where she has to format her own pictures or set any manual parameters, because she doesn't know how to do that.

I suppose I shouldn't have posted this as it's a pretty non-descript question. I was just getting very frustrated that everything I build for one browser doesn't even come close to working in another. Max-height, outline, opacity... all things that are very useful in certain circumstances (mine), but unusable because of cross-browser compatibility. Very frustrating.

 

[horrorshow75]

Ahh. I see. Hmmm I would have to look into that one.

Hopefully one day all browser developers will conform to web standards and make our lives 1000 times easier.