html - 无需滚动即可保持响应的图像高度

Question

这里是一个简单的问题，但正在努力寻找实现我想要的目标的最佳方法...我有一张图像，我试图在浏览器中保持居中并响应。将宽度设置为 100%，图像响应完美(水平)。我遇到的麻烦是高度。我不希望浏览器滚动并让图像以正确的比例位于中心，并带有 20 像素的填充。

Dropbox 查看器有一个很好的例子来说明我正在努力完成的事情，请参见此处:https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg

下面更新了最近的代码

我在这里有一个我到目前为止的演示(如果你垂直挤压浏览器，滚动条会出现):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;
}

那么，在没有滚动的情况下实现高度以保持响应的最佳方法是什么？

Answer 1

也许这对你有用:

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;
}