Firefox not respecting max-width/height in parent without set width/height - html

Question

I've got a strange problem, in Chrome/Safari, the image respects it's max width/height styling inside of a parent with no set width/height. but not in Firefox/Opera.
<div id="container">
<figure>
<img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg">
</figure>
</div>
That's the image and it's containers. The CSS is as follows:
body {
width: 100%;
height: 100%;
}
#container {
width: 90%;
height: 90%;
margin: auto;
}
figure {
position: relative;
display: inline-block;
margin: 0;
vertical-align: top;
line-height: 0;
}
img {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}
The figure element is only there to serve as an overlay to the image by using the :before selector, but that doesn't work if it has a set width/height. Is there any way to get Firefox and Opera to respect the grandparents height/width instead?
JSFiddle: http://jsfiddle.net/GUrkj/1/

Answer 1

See here on MDN
Specifically:
The max-height CSS property is used to set the maximum height of a
given element. It prevents the used value of the height property from
becoming larger than the value specified for max-height.
And...
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as none.
What the last part means, is that in Firefox at least, without a height value explicitly stated, max-height becomes none - resulting in the observerd behaviour.
As such you will need to add height and width to the figure element at the least.

Answer 2

In CSS when you use 100% you are always saying "100%" of my parent. If your parent is unconstrained so are you. The trick here is that the height is the only one that matters, set the figure height to 100%, but don't set its width and you should be fine.