博客图片点击放大，再点恢复原状

最新推荐文章于 2022-04-26 10:00:56 发布

weixin_30563917

最新推荐文章于 2022-04-26 10:00:56 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhanxiaoyun/p/8259451.html

本文介绍了一种使用HTML和CSS将图片居中显示的方法，并通过JavaScript进行页面加载后的控制。具体实现了图片在浏览器窗口中始终保持居中的效果。

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

1. js代码部分放于页脚HTML代码

2. html代码部分也放于页脚HTML代码

<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: auto;width: 46.6325%;border: 0; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>

大功告成！