如何使图像完美适合没有滚动条的浏览器窗口？
- Patricia Arquette原创
- 2024-11-01 07:33:02660浏览
如何调整图像大小以完美适应浏览器窗口
调整图像大小以适合浏览器窗口的范围可以这是一个挑战，特别是当需要考虑窗口大小、图像尺寸和滚动条等各种因素时。
问题：
目标是保持图像的宽高比，防止滚动条出现，并确保图像占据最大可用空间而不超过其原始大小。
仅 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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn