jquery - 让图像弹出叠加层工作

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() 即可将给定图像显示为可以通过单击将其关闭的叠加层。用英语来说，有一个固定到 View 的前景元素，一个没有预设大小(只有填充)的“容器”，以及一个进入容器内部的图像。

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

Answer 1

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

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

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

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