在做企業(yè)網(wǎng)站的時(shí)候有的有的客戶的圖片比較大 網(wǎng)頁(yè)的框架比較小 需要點(diǎn)擊圖片方法

之前寫過(guò)一個(gè)教程：JS讓網(wǎng)頁(yè)文章里的所有圖片都可以新窗口打開這個(gè)教程不太利于用戶體驗(yàn) 并且手機(jī)點(diǎn)擊圖片也有出現(xiàn)問(wèn)題

接下來(lái)可以用這篇文章 

另外也可以參考：點(diǎn)擊圖片放大特效代碼，再點(diǎn)擊恢復(fù)原狀【多種方法】

圖片的實(shí)際大小為1920x1080，我們先把寬度限制在300px，點(diǎn)擊后圖片還原到100%（如果瀏覽器窗口高度小于圖片的真實(shí)高度，這樣的情況下，圖片雖然寬度還原到100%，但是所顯示的大小依然取決于瀏覽器窗口的高度），如果想要圖片根據(jù)父框架的寬度進(jìn)行放大，請(qǐng)點(diǎn)擊這里：
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>