让图像弹出叠加层工作

Question

首先，代码：

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%;
}

Javascript：

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();
    });
}

似乎有效。只需调用函数popupImage() 即可将给定图像显示为可以通过单击关闭的叠加层。在英语中，有一个固定在视图上的前景元素，一个没有预设大小（只有填充）的“容器”，以及一个进入容器内部的图像。

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

Answer 1

如果您将container.append() 行更改为：

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

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

仅使用width意味着图像将按比例缩放，而如果您设置height（以及width）图像可能会失真。