如何调整图像大小以适合浏览器窗口而不变形？
- Barbara Streisand原创
- 2024-11-01 15:51:551063浏览
调整图像大小以适合浏览器窗口且不变形
调整图像大小以适合浏览器窗口是一项看似简单的解决方案的常见任务。然而，遵守特定要求，例如保留比例和避免裁剪，可能会带来挑战。
没有滚动条和 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