如何使图片适合绝对定位模态窗口？

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
打开图片时需要将图片放在绿色 div 内
但不知何故，当我改变绝对定位的宽度和高度时，#file_viewer_window 附加到该 div 的图片不会改变与父 div 对应的大小
谢谢！

Answer 1

试试this。

关键是使用带有position: relative; 的包装容器。更多信息this post