这似乎很琐碎，但经过所有的研究和编码后，我无法让它正常工作。条件如下：
基本上我想要的是：
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上述代码的问题在于它无法正常工作：图片会通过添加垂直滚动条来占用所有垂直空间。
我可以使用PHP、Javascript、JQuery，但我希望有一个仅基于CSS的解决方案。如果它不能在IE中工作也无所谓。
更新于2018-04-11
以下是一种无需Javascript，仅使用CSS的解决方案。 图像将动态居中并调整大小以适应窗口。
<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>
[另一种、旧的] 解决方案使用 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插件。
这里有一个简单的CSS-only解决方案（JSFiddle），适用于各个平台，包括移动设备和IE浏览器：
CSS 2.0：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML：
<body>
<img src="images/your-image.png" />
</body>
CSS3引入了一些相对于视窗（即窗口）来测量的新单位，它们分别是vh和vw，其中vh测量视口高度，vw测量视口宽度。下面是一个简单的仅使用CSS的解决方案：
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
唯一的限制是，只有在页面上没有其他元素贡献高度时才起作用。
100vh不能让图片适应，而97vh却可以？ - Pavelvh 字面意思是视图的高度，因此如果任何其他元素向您的页面添加高度，则整个页面将超过 100vh。这有意义吗？ - Max.svg文件渲染正常，但将其重命名为.html会导致不准确）：浏览器会自动添加带有默认margin:8的<body>标签，即使文件没有<body>标签。因此解决方案是添加<style>body{margin:0}</style>。 - Pavel<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>
CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
使用这个代码片段进行操作。
<div> 代替 <img> 来实现这个吗？ - StevoHN对于未来的读者，如果您需要一个解决方案，回答1-6并以允许调整大小超出原始大小的方式进行7，我已经为此问题开发出完整的解决方案：
<!DOCTYPE html>
<html>
<body style="overflow:hidden; margin:0; text-align:center;">
<img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
</body>
</html>我知道这里已经有几个答案了，但以下是我使用的方法：
max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
将图片调整大小以适应屏幕，通过保持长边的纵横比。
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
width: 100vw - 图片宽度将会占据整个视口的宽度
height: auto - 图片高度将会等比例缩放
max-height: 100vw - 如果图片高度超过了视口的高度，那么图片高度将被调整以适应屏幕，所以图片宽度也会因为下面这条属性而被调整
object-fit: contain - 替换的内容按比例缩放，同时适应元素的内容框
注意：只有 IE 16.0 及以上版本完全支持 object-fit
object-fit，或者您可以明确使用 object-fit: fill;，这是 默认 的。 - am0wa让它简单易懂。谢谢。
.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}<div class="bg"></div>我的通用懒惰CSS规则：
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
如果图片本身像素低，这可能会放大您的图像（这与图像质量和尺寸有关）。 要使图像居中，您也可以尝试在CSS中使用以下代码：
display:block;
margin: auto 0;
居中图片
在你的HTML代码中：
<div class="background"></div>
width: 100%;
overflow: hidden;
我相信那应该可以解决问题。