这看起来微不足道，但在所有研究和编码之后我无法让它工作。条件是:
- 浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
- 图像的原始尺寸未知，可能适合也可能不适合浏览器窗口。
- 图像垂直和水平居中。
- 必须保留图像比例。
- 图像必须在窗口中完整显示(无裁剪)。
- 我不希望出现滚动条(如果图像适合，它们不应该出现。)
- 图像会在窗口尺寸发生变化时自动调整大小，以占据所有可用空间而不会大于其原始大小。
基本上我想要的是:
.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>
[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 插件非常相似的解决方案。
关于html - 如何调整图像大小以适应浏览器窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6169666/