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）图片可能会被扭曲了。

使图像弹出叠加层起作用

1 个答案: