这看起来微不足道，但经过所有研究和编码后，我无法让它发挥作用。条件是：
- 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
- 图像的原始尺寸未知，并且可能适合也可能不适合浏览器窗口。
- 图像垂直和水平居中。
- 必须保留图像比例。
- 图像必须完整地显示在窗口中（不得裁剪。）
- 我不希望出现滚动条（如果图像适合，则不应出现滚动条。）
- 当窗口尺寸发生变化时，图像会自动调整大小，以占据所有可用空间而不大于其原始大小。
基本上我想要的是这样的：
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上面代码的问题是它不起作用：图片通过添加垂直滚动条占用了它所需的所有垂直空间。
我可以使用 PHP、Javascript、JQuery，但我宁愿选择纯 CSS 的解决方案。我不在乎它是否在 IE 中不起作用。
更新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>
[其他，旧]解决方案使用 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 插件。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
