Image height to stay responsive with no scroll - html

Question

Simple question here but struggling with the best way to accomplish what I want... I have an image that I am trying to keep centered in the browser and responsive. Setting width to 100%, the image responds perfectly (horizontally). What I am having trouble with is the height. I do not want the browser to ever scroll and have the image, with correct ratio, at center, with 20px padding.
Dropbox viewer has a great example of exactly what I am trying to accomplish, see here: https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg
UPDATE BELOW WITH MORE RECENT CODE
I have a demo here of what I have so far (if you crunch the browser vertically, the scroll bar will appear): http://jsfiddle.net/k7JG5/7/
HTML
<div id="top_nav">Logo Here</div>
<div id="img_wrap">
<center><img src="http://goldenleafdesigns.com/images/random- images/soul_id_select_image1.jpg" /><center>
</div>
CSS
body {
margin: 0px;
padding: 0px;
background-color: #000;
}
#top_nav {
height: 44px;
width: 100%;
background-color: #FFF;
text-align: center;
line-height: 44px;
}
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
img {
outline: 0;
max-width: 100%;
max-height: auto;
}
so, whats the best way to accomplish the height to stay responsive with no scroll?

Answer 1

Maybe this works for you:
http://jsfiddle.net/4LNND/
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position:absolute;
bottom:0;
left:0;
right:0;
top:44px;
}
#img_wrap img {
outline: 0;
max-width: 100%;
max-height: 100%;
display:block;
}

Answer 2

There are a bit more complicated ways to do it, this is the simplest
jsBin demo
HTML:
<div id="img_wrap"></div>
CSS:
#img_wrap{
position:absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: url('pathToImage.jpg') no-repeat center center fixed;
background-size: contain;
}
// Or instead of contain use cover if you don't mind the image being cut-off