如何动态调整图像大小以适合浏览器窗口？
- Linda Hamilton原创
- 2024-10-31 01:17:29611浏览
如何动态调整图像大小以适合浏览器窗口
将图像封装在浏览器窗口中，同时保持其宽高比，确保它完全显示，并且防止滚动条通常会带来挑战。为了有效解决这些问题，这里有两种综合方法。
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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn