更新2018-04-11
这是一个无Javascript， 仅CSS的 解决方案。图像将动态居中并调整大小以适合窗口。
<html><head> <style> * { margin: 0; padding: 0; } .imgbox { display: grid; height: 100%; } .center-fit { max-width: 100%; max-height: 100vh; margin: auto; } </style></head><body><div > <img src='pic.png'></div></body></html>[其他，较旧的]解决方案使用JQuery设置图像容器的高度（
body在下面的示例中），以便
max-height图像上的属性按预期工作。调整客户端窗口的大小后，图像也会自动调整大小。
<!DOCTYPE html><html><head> <style> * { padding: 0; margin: 0; } .fit { max-width: 100%; max-height: 100%; } .center { display: block; margin: auto; } </style></head><body><img src="pic.jpg" ><script src="http://pre.jquery.com/jquery-latest.js"></script><script type="text/javascript" language="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>注意：用户gutierrezalex在此页面上打包了与JQuery插件非常相似的解决方案。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）