Jquery 获得一个图像弹出覆盖工作

首先，代码：

CSS:

.popup_foreground {
    position:   fixed;
    top:    0px;
    left:    0px;
    width:    100%;
    height:    100%;
    vertical-align:  middle;
    text-align:   center;
    z-index:   1;
}
.popup_foreground_container {
    margin:    auto;
    padding:   24px;
    background-color: white;
    border:    1px solid black;
    display:   inline-block;
    display:   -moz-inline-stack;
    max-width:   100%;
    max-height:   100%;
    z-index:   2;
}
.popup_image {
    max-height:   100%;
}

function popupImage( img )
{
    var fg = $( "<div class='popup_foreground'></div>" );
    var container = $( "<div class='popup_foreground_container'></div>" );
    var image = $( "<img class='image_full popup_image' src='"+img+"' />" );
    fg.append( container );
    container.append( image );

    $("body").append( fg );

    fg.click( function(){
        fg.remove();
    });
}

Javascript:

.popup_foreground {
    position:   fixed;
    top:    0px;
    left:    0px;
    width:    100%;
    height:    100%;
    vertical-align:  middle;
    text-align:   center;
    z-index:   1;
}
.popup_foreground_container {
    margin:    auto;
    padding:   24px;
    background-color: white;
    border:    1px solid black;
    display:   inline-block;
    display:   -moz-inline-stack;
    max-width:   100%;
    max-height:   100%;
    z-index:   2;
}
.popup_image {
    max-height:   100%;
}

function popupImage( img )
{
    var fg = $( "<div class='popup_foreground'></div>" );
    var container = $( "<div class='popup_foreground_container'></div>" );
    var image = $( "<img class='image_full popup_image' src='"+img+"' />" );
    fg.append( container );
    container.append( image );

    $("body").append( fg );

    fg.click( function(){
        fg.remove();
    });
}

函数弹出图像（img）
{
变量fg=$（“”）；
变量容器=$（“”）；
变量图像=$（“”）；
fg.追加（容器）；
container.append（图像）；
$（“正文”）。附加（fg）；
fg.单击（函数（）{
fg.remove（）；
});
}

似乎有效。只需调用函数

popupImage（）

即可将给定图像显示为覆盖，只需单击即可关闭。在英语中，有一个固定到视图的前景元素，一个没有预设大小的“容器”（仅填充），以及一个位于容器内部的图像

---

我的问题是，一个大于屏幕宽度或高度的图像会被挤出比例，以适应屏幕。我真的不能那样。我不想使用滚动。如何使图像按比例缩放以适应浏览器窗口？

如果将

container.append（）行更改为：

container.append( $( "<img class='image_full popup_image' src='"+img+"' width='"+ $(container).width() +"'/>" ) );

container.append（$（“”）；

它应该将容器元素的
宽度
分配给创建的
img
。但是，对于较小的图像，这可能是一个问题，因此可能需要使用
if/else
语句来检查是否需要缩放

仅使用
宽度
意味着图像将按比例缩放，而如果设置
高度
（以及
宽度
），图像可能会失真。
这就是我要说的，此外，您必须首先计算相对最大的是
宽度
还是
高度
（与屏幕相比），然后在语句中使用
宽度
或
高度
。@仓鼠是的，否则您将不知道它是否太高或太宽。或者两者都有。哦，对不起，是的，我刚刚发现了。@仓鼠，顺便说一下，有几个jQuery lightbox插件可能已经满足了你的需要。不过，我想要一些我可以亲密控制的东西。另外，无论如何，这看起来并不难做。