在做企業網站的時候有的有的客戶的圖片比較大 網頁的框架比較小 需要點擊圖片方法

之前寫過一個教程：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>