Max-height ignored in Firefox, works in Chrome and Safari

You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.display {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

There’s a working example here: http://jsfiddle.net/P7wfm/

If you don’t want image to crop if they exceed the 80% height or width set img height to

.display img {
    min-height: 100%;
    min-width: 100%;
}