How can I scale and centre align an inline image within a fluid DIV?

Question

I have a fluid layout and I have a div that matches the height and width of the browser window at all times, even when the browser is resized. So a div that is 100% height and 100% width of the browser window.

Within this div I have an image that fits 100% of its parents width and height. So in theory this image will be fullscreen. At the moment, when you make the browser window larger, the image size exceeds that of its parent and the right hand side & the bottom of the image gets cut off.

How can I get all edges of the image cut off when the browser window is enlarged? So I guess I want to vertically center the image within its parent.

All the images/divs widths are calculated using percentages.

Here's the link to my existing code: http://jsfiddle.net/PfzQ8/4/

Edit: That jsfiddle isn't the problem code its just the code I currently have and would like to expand on it.

Answer 1

This has been voted down I think because of my wording more than anything but after re-posting another question I found a suitable answer, see here: Scaling an inline image from the absolute center of its parent?