如何动态调整图像大小以适合浏览器窗口？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-10-31 01:17:29

原创

610 人浏览过

How to Dynamically Resize an Image to Fit the Browser Window?

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

将图像封装在浏览器窗口中，同时保持其宽高比，确保它完全显示，并且防止滚动条通常会带来挑战。为了有效解决这些问题，这里有两种综合方法。

1.仅 CSS 解决方案（2018 更新）

利用 CSS 的网格布局和自动边距功能，此方法提供了全面的仅 CSS 解决方案。下面的代码片段动态居中并调整图像大小以适合浏览器窗口：

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

登录后复制

CSS:

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

登录后复制

2. JavaScript/jQuery 解决方案

此方法依赖 jQuery 动态设置图像容器的高度，从而允许图像上的 max-height 属性按预期运行。当浏览器窗口大小调整时，图像会自动调整其大小。

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

登录后复制

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

登录后复制

注意：用户 gutierrezalex 创建的 jQuery 插件提供了类似的解决方案。

以上是如何动态调整图像大小以适合浏览器窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！