知道了，但我使用图像作为背景而不是 <img>。希望这不是问题。
使用background-size:contain; 会缩放背景图像，同时保留图像的原始比例/纵横比。 FF4+、IE9+、Chrome1+（带厂商前缀）、Opera10+和Safari 3+（source）都支持。
您的第一个要求的主要问题是：“containig div/table 的大小仅限于客户区的大小”，除非父容器也设置了高度，否则您无法设置 height:100%;。
在您的页面中，我看到您有一个具有动态高度的页眉和页脚，因此您需要一些 jQuery 来调整容器的高度。但让我们先看看如何仅使用 CSS 来实现，然后我们将添加页眉和页脚。
Demo（尝试调整窗口大小）
HTML：
<html>
<body>
<div id="body">
<div>
<div class="left"></div>
</div>
<div>
<div class="right"></div>
</div>
</div>
</body>
</html>
CSS：
html, body, #body {
width:100%;
height:100%;
}
#body, #body > div {
overflow:hidden;
}
#body > div {
box-sizing:border-box;
width:50%;
height:100%;
float:left;
padding:10px; /* or whatever you need */
}
#body > div > div {
margin:0 auto;
height:100%;
width:100%;
background-repeat:no-repeat;
background-position:top center;
-webkit-background-size:contain; /* Chrome1+, Safari 3+ */
background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
background-image:url(/* your left image url */);
max-width:417px; /* the real image width */
max-height:512px;; /* the real image height */
}
#body > div > div.right {
background-image:url(/* your right image url */);
max-width:417px; /* the real image width */
max-height:512px;; /* the real image height */
}
让我们添加页眉和页脚。我们必须从#body 中删除height:100%;，并根据以下公式计算其高度：窗口高度 - 页眉高度 - 页脚高度。
Demo（调整窗口大小）
HTML：
<html>
<body>
<header>I'm a header</header>
<div id="body">
<div>
<div class="left"></div>
</div>
<div>
<div class="right"></div>
</div>
</div>
<footer>I'm a footer</footer>
</body>
</html>
CSS：
html, body {
width:100%;
height:100%;
}
header, footer {
background:grey;
}
#body {
height:400px; /* fallback no javascript */
}
#body, #body > div {
overflow:hidden;
}
#body > div {
box-sizing:border-box;
width:50%;
height:100%;
float:left;
padding:10px; /* or whatever you need */
}
#body > div > div {
margin:0 auto;
height:100%;
width:100%;
background-repeat:no-repeat;
background-position:top center;
-webkit-background-size:contain; /* Chrome1+, Safari 3+ */
background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
background-image:url(/* your left image url */);
max-width:417px; /* the real image width */
max-height:512px;; /* the real image height */
}
#body > div > div.right {
background-image:url(/* your right image url */);
max-width:417px; /* the real image width */
max-height:512px;; /* the real image height */
}
jQuery:
function calcHeight(){
var docHeight = $(document).height();
var headHeight = $('header').outerHeight();
var footHeight = $('footer').outerHeight();
var bodyHeight = docHeight - ( headHeight + footHeight);
$('#body').height(bodyHeight);
}
calcHeight(); /* called first time on page load */
$(window).on('resize',calcHeight());/* do the math again when window's resized */
我认为这很简单。我这样写是为了让大家可以理解，当然你也可以压缩更多。
我使用outerHeight 作为页脚和页眉以包含可能的边距。
如果您不想包含 jQuery 库，那么肯定有一种纯 JavaScript 方式来获得它。