网页里点击图片放大成原图 在点击就变小 恢复原状【多种方法】

在做企业网站的时候有的有的客户的图片比较大 网页的框架比较小 需要点击图片方法

之前写过一个教程：JS让网页文章里的所有图片都可以新窗口打开这个教程不太利于用户体验 并且手机点击图片也有出现问题

接下来可以用这篇文章 

另外也可以参考：点击图片放大特效代码，再点击恢复原状【多种方法】

图片的实际大小为1920x1080，我们先把宽度限制在300px，点击后图片还原到100%（如果浏览器窗口高度小于图片的真实高度，这样的情况下，图片虽然宽度还原到100%，但是所显示的大小依然取决于浏览器窗口的高度），如果想要图片根据父框架的宽度进行放大，请点击这里：
http://www.dedecmsok.com/html/n171.html

CSS

 

1.  <style>
           #popup{
               position: fixed;
               left: 0px;
               top: 0px;
               width: 100%;
               height: 100%;
               text-align: center;
               display: none;
   z-index: 9999999;
           }
           #popup .bg{
               background-color: rgba(0,0,0,0.5);
               width: 100%;
               height: 100%;
           }
           @media \0screen\,screen\9 {
               #popup .bg{
                   background-color:#000000;
                   filter:Alpha(opacity=50);
                   position:static;
               }
               #popup .bg img{
                   position: relative;
               }
           }
           #popup img{
               margin-top: 2%;
               max-height: 90%;
           }
       </style>
2.  

html

<div id="dedecmsok">
    <img src="111.jpg" />
    <img src="222.jpg" />
</div>
<div id="popup">
  <div class="bg">
    <img src=""/>
  </div>
</div>