Получение изображения всплывающее окно наложения на работу

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) изображение может быть искажено.