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