如何调整图像大小以适合浏览器窗口？

小编典典

如何调整图像大小以适合浏览器窗口？

css

这看似微不足道，但是经过所有的研究和编码，我无法使其正常工作。条件是：

浏览器窗口大小未知。因此，请不要提出涉及绝对像素大小的解决方案。
图片的原始尺寸未知，可能适合浏览器窗口，也可能不适合浏览器窗口。
图像垂直和水平居中。
图像比例必须守恒。
图像必须在窗口中完整显示（不裁剪）。
我不希望滚动条出现（如果图像合适，它们也不应该出现。）
窗口尺寸更改时，图像会自动调整大小，以占据所有可用空间而不会大于其原始大小。

基本上我想要的是：

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上面的代码的问题在于它不起作用：图片通过添加垂直滚动条来获取所需的所有垂直空间。

我可以使用PHP，Javascript，JQuery，但我会选择仅CSS的解决方案。我不在乎它是否在IE中不起作用。

阅读 293

2020-05-16

共1个答案

小编典典

更新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插件非常相似的解决方案。

2020-05-16