Получение всплывающего оверлея изображения для работы - PullRequest
2 голосов
/ 13 января 2011

Сначала код:

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() отображает данное изображение как наложение, которое можно отключить одним щелчком мыши. В английском языке есть элемент переднего плана, который прикреплен к представлению, «контейнер» без заданного размера (только заполнение) и изображение, которое идет внутри контейнера.

Моя проблема в том, что изображение, превышающее ширину или высоту экрана, сжимается непропорционально, чтобы соответствовать. Я действительно не могу этого иметь. Я не хочу использовать прокрутку. Как я могу пропорционально масштабировать изображения, чтобы они помещались в окне браузера?

1 Ответ

1 голос
/ 13 января 2011

Если вы измените строку container.append() на:

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

Ему следует присвоить width элемента контейнера для созданного img. Это может быть проблемой, однако, для небольших изображений, поэтому, возможно, стоит использовать оператор if/else, чтобы проверить, требуется ли масштабирование.

Использование только width означает, что изображение будет пропорционально масштабировано, тогда как при установке height ( и width) изображение может быть искажено.

...