Firefox max-height problem

[mg4]

I'm making a slideshow of images with the class "Display". I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:

.Display {

max-width: 80%;

max-height: 80%;
}

It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.

Thanks very much for any help.

[Ritesh_4]

have you tried using only height: 80%?

[Borzoi]

Using just height: 80% will fix it at that permanently, stretching smaller images.

I've just tried using max-height and it doesn't seem to work in either FireFox or IE. The only solution I could find that wouldn't stretch smaller images is wrapping the <img> in a <div> and setting height to 100% in that;

<div style="height:100%;">
  <img class="Display" src="source/image/path/file.jpg" />
</div>

Obviously, you could put a class in the stylesheet instead of declaring it in the <div> tag.

I think the reason for this is because the height of a page isn't set to the height of the display area in the window by default, like the width is. By setting the height in a <div> to 100%, you're setting the height of that element to 100% of the display area in the window.