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

首页

web前端

css教程

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

Barbara Streisand

Nov 01, 2024 pm 03:51 PM

How Can I Resize an Image to Fit the Browser Window Without Distortion?

调整图像大小以适合浏览器窗口且不变形

调整图像大小以适合浏览器窗口是一项看似简单的解决方案的常见任务。然而，遵守特定要求，例如保留比例和避免裁剪，可能会带来挑战。

没有滚动条和 Javascript 的解决方案（仅限 CSS）

<code class="html"><html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .imgbox {
      display: grid;
      height: 100%;
    }
    .center-fit {
      max-width: 100%;
      max-height: 100vh; /* vh ensures height matches browser window */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="imgbox">
    <img class="center-fit" src='pic.png'>
  </div>
</body>
</html></code>

登录后复制

这个解决方案使用 CSS Grid 来确保图像容器占据整个窗口高度。然后将图像设置为在该容器内水平和垂直适合，保留其纵横比并避免添加滚动条。

使用 JQuery 的解决方案

如果 Javascript 可用，另一种做法是：

<code class="html"><html>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  function set_body_height() {
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });
</script>

</body>
</html></code>

登录后复制

这里将body高度设置为与窗口高度匹配，保证max-height图像上的属性功能正常。还处理了窗口调整大小事件，以便在调整窗口大小时自动调整主体高度和图像大小。

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn