如何使圖片適合絕對定位模態窗口？

Question

這裏是我的html代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<div id="file_img"><img src="http://i.hdws.org/f/7d8a/r/b6727a3685.jpg" width="150px" height="150px"></div> 


     <div id="boxes"> 
      <div id="mask"></div> 
      <div class="window" id="file_viewer_window"> 
       <table class="modalWindow"> 

        <tr> 
         <td><div id="img_src"></div></td> 
        </tr> 
        <tr> 
         <td><div id="object_preview"></div></td> 
        </tr> 
        <tr> 
         <td><a href="" id="window_close" class="close">close</a></td> 
        </tr> 
       </table> 
      </div> 
     </div> 

CSS代碼：

#mask { 
      top: 0; 
      position: absolute; 
      z-index: 9000; 
      background-color: yellow; 
      display: none;   
      } 

      #boxes .window { 
      display: none; 
      z-index: 9999; 
      } 

      #file_viewer_window { 
      position: absolute; 
      background-color: green; 
      padding:10px; 
      border: 1px black solid; 

      } 

      a#window-close { 
      font-size: 15px; 
      color: black; 
      border: 1px black solid; 
      } 

      table.modalWindow { 

      color: black; 
      background: white; 
      text-align: center; 

      } 

      img{ 
      max-width: 100%; 
      max-height: 100%; 
      } 

      #img_src { 

      } 

我jQuery代碼：

$(document) 
      .on(
      'click', 
      '#file_img', 
      function() { 
       var viewedFileName = $(this) 
       .parent().find(
       "#file_name") 
       .find("a").text(); 
       console.log(viewedFileName); 
       var id = $('#file_viewer_window'); 
       // Get the screen height and width 
       var maskHeight = $(document) 
       .height(); 
       var maskWidth = $(window) 
       .width(); 

       // Set height and width to mask to fill up the whole screen 
       $('#mask').css({ 
        'width' : maskWidth, 
        'height' : maskHeight 
       }); 

       // transition effect 
       $('#mask').fadeIn(1000); 
       $('#mask').fadeTo("slow", 0.8); 

       // Get the window height and width 
       var winH = $(window).height(); 
       var winW = $(window).width(); 

       var modalH = winH - winH*0.3; 
       var modalW = winW - winW*0.3; 

       // Set the popup window to center 
       $(id).css('top', 0); 

       // transition effect 
       $(id).fadeIn(2000); 
       var displayImage = "<img src=\"http://i.hdws.org/f/7d8a/r/b6727a3685.jpg\" >"; 
       id 
       .find(
       "#img_src").find('img') 
       .remove(); 



       id    .find(    "#img_src")    .append(    displayImage); 

        $(id).width(modalW).height(modalH);  



       $('.window .close').click(function(e) { 
        // Cancel the link behavior 
        e.preventDefault(); 
        $('#mask, .window').hide(); 
       }); 
       // if mask is clicked 
       $('#mask').click(function() { 
        $(this).hide(); 
        $('.window').hide(); 
       }); 
      }); 

我試圖符合該圖片絕對的div出現在點擊新的寬度和高度
當圖片打開時需要一個圖片在綠色格內
但不知何故，當我改變絕對定位的寬度和高度#file_viewer_window圖片taht附加到該div不會改變大小對應於父div
謝謝！

Answer 1

嘗試this。

關鍵是使用包裝容器position: relative;。更多信息在this post