这看起来微不足道，但经过所有的研究和编码，我无法让它工作.条件包括:
基本上我想要的是:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上面代码的问题在于它不起作用:pic通过添加一个垂直滚动条来占用它所需的所有垂直空间.
我可以使用PHP、Javascript和JQuery，但我愿意为一个只使用CSS的解决方案而拼命.我不在乎它在IE中是否起作用.
Update 2018-04-11
这里有一个无Javascript的CSS-only解决方案.图像将动态居中并调整大小以适合窗口.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
[Other，old]解决方案使用JQuery设置图像容器的高度(在下面的示例中为body)，以便图像上的max-height属性按预期工作.当调整客户端窗口的大小时，图像也会自动调整大小.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html>
注意:用户gutierrezalex在本页上打包了一个非常类似于JQuery插件的解决方案.