如何将图片调整到绝对定位模态窗口

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

试试这个。

关键是使用带有 position: relative; 的包装容器。这篇文章中的更多信息