实现动态加载的图片页面中纵向居中显示

小土豆子额

于 2017-12-20 13:10:27 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签：图片

本文链接：https://blog.youkuaiyun.com/chenyidong521/article/details/78852037

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现图片预加载并居中显示的方法。通过动态设置图片的高度和顶部边距，确保了图片能在弹窗中水平垂直居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 function showImg(url){
            $("#imgDiv").html("<div id='imgBadDiv' style='display: flex;flex-direction: row;justify-content: center;align-content: center'><img id='badImg' src='"+url+"' style='max-height:600px;max-width:800px;' /></div>");
            $("#imgBadDiv img").load(function(){
                var h = $("#badImg").height();
                var top =(document.body.clientHeight-h)/2;
                $("#badImg").css("margin-top",top)
            });
            $("#imgDiv").show();
        }