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

最新推荐文章于 2023-09-18 15:02:14 发布

原创最新推荐文章于 2023-09-18 15:02:14 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片

html5 专栏收录该内容

3 篇文章

订阅专栏

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

 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();
        }