如何使图像完美适合没有滚动条的浏览器窗口？-css教程-PHP中文网

如何使图像完美适合没有滚动条的浏览器窗口？

Patricia Arquette

发布： 2024-11-01 07:33:02

原创

681 人浏览过

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

如何调整图像大小以完美适应浏览器窗口

调整图像大小以适合浏览器窗口的范围可以这是一个挑战，特别是当需要考虑窗口大小、图像尺寸和滚动条等各种因素时。

问题：

目标是保持图像的宽高比，防止滚动条出现，并确保图像占据最大可用空间而不超过其原始大小。

仅 CSS 解决方案：

更新 ( 2018-04-11):

<code class="css">* { margin: 0; padding: 0; }
.imgbox { display: grid; height: 100%; }
.center-fit { max-width: 100%; max-height: 100vh; margin: auto; }</code>

登录后复制

这段代码仅通过 CSS 就达到了预期的结果。该图像驻留在占据整个窗口高度的网格显示容器内。图像本身会调整其宽度和高度以适合此容器，保留其纵横比，同时确保其在窗口中居中。

JQuery 解决方案：

<code class="html"><!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">
    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></code>

登录后复制

JQuery 解决方案涉及设置主体的高度以匹配窗口高度。这使得图像的 max-height 属性能够按预期发挥作用，将图像限制在窗口的边界内。此外，图像大小会在窗口大小调整时自动调整。

以上是如何使图像完美适合没有滚动条的浏览器窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！