jquery - How to fit picture to absolute positioning modal window? -

here html code:

<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 code:

#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 {              } 

my jquery code:

$(document)             .on(             'click',             '#file_img',             function() {                 var viewedfilename = $(this)                 .parent().find(                 "#file_name")                 .find("a").text();                 console.log(viewedfilename);                 var id = $('#file_viewer_window');                 // screen height , width                 var maskheight = $(document)                 .height();                 var maskwidth = $(window)                 .width();                  // set height , width mask fill whole screen                 $('#mask').css({                     'width' : maskwidth,                     'height' : maskheight                 });                  // transition effect                 $('#mask').fadein(1000);                 $('#mask').fadeto("slow", 0.8);                  // window height , width                 var winh = $(window).height();                 var winw = $(window).width();                  var modalh = winh - winh*0.3;                 var modalw = winw - winw*0.3;                  // set popup window 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 link behavior                     e.preventdefault();                     $('#mask, .window').hide();                 });                 // if mask clicked                 $('#mask').click(function() {                     $(this).hide();                     $('.window').hide();                 });             }); 

i'm trying fit picture absolute div appears on click new width , height
need picture inside green div when picture opened
somehow when change width , height of absolute positioning #file_viewer_window picture taht appended div doesn't change size corresponding parent div
thanks!

try this.

the key using wrapper container position: relative;. more information in this post