使用視圖圖像縮放圖像而不使用下面的代碼

我試圖展示一個圖像，當您在特定地點放大時，應該在屏幕上完全顯示該特定區域。我創建了一個fiddle。我想要查看與fiddle中顯示的分辨率相同的圖像，但是當我放大時，圖像的放大區域應填滿整個原始圖像幀。使用視圖圖像縮放圖像而不使用下面的代碼

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'/> 

    <style> 
     /* styles unrelated to zoom */ 
       body { 
    background-color: black; 
    margin:0 auto; 
} 
     * { border:0; margin:0; padding:0; } 
     p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;} 

     /* these styles are for the demo, but are not required for the plugin */ 
     .zoom { 
      display:inline-block; 
      position: relative; 
         background-color: black;       
         z-index:1000; 
     } 

     /* magnifying glass icon */ 
     .zoom:after { 
      content:''; 
      display:block; 
      width:50px; 
      height:50px; 
      position:relative; 
      top:50; 
      right:70; 

     } 

     .zoom img { 
      display: block; 
     } 

     .zoom img::selection { background-color: transparent; } 

     #ex3 img:hover { cursor:-moz-zoom-in; } 

    </style> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
    <script src='js/jquery.zoom.js'></script> 
    <script> 
     $(document).ready(function(){ 
      $('#ex3').zoom({ on:'toggle' });    

     }); 
    </script> 
</head> 
<body> 
<center> 
    <span class='zoom' id='ex3'> 
    <img src='images/cg_layout.jpg' width='918' height='655' alt=''> 

    </span> 
</center> 

</body> 
</html>

編輯
上面的代碼工作在現在在一個特定的地方放大，當我點擊在Firefox瀏覽圖像很好，我可以看到放大在那裏工作也，它可以完美地按照我的需要。我能做些什麼來縮放視圖圖像。現在
EDIT1 當我在Firefox點擊查看圖片，我可以放大這一形象。當我點擊縮放圖像從shrinktofit類變爲overflowing。當我做下單擊圖像zoomouts從overflowing到shrinktofit。現在怎麼能得到這個功能嵌入了我的形象

來源

2014-02-24 user3004356

不工作，因爲GIT中拒絕執行腳本，你只是刪除該鏈接並將其下載到本地，它會正常工作，檢查：http://jsfiddle.net/hardiksondagar/hYMc5/2/ –