Лучший способ масштабирования изображения в полноэкранном режиме, в зависимости от размера видового экрана

Question

Я работаю над небольшим сайтом, обеспечивая трехмерную фотографию высокого качества. Теперь, когда вы нажимаете на изображение, оно масштабируется, чтобы соответствовать оболочке, что на самом деле означает ширину 1000 пикселей. Соотношение 4: 3.

Далее я теперь клонировать изображение и добавляю его к телу и его масштабирование до размера области просмотра, установив height в 100%.

Могу ли я сделать это любым другим способом и считать, что это кросс-платформенная совместимость? пожалуйста, дайте мне обратную связь

живой пример фактического сайта: NicRay

Answer 1

создать что-то вроде наложения ... то, что вы уже используете. заполните этот оверлей всем экраном (100% х 100% и зафиксированным положением) и используйте таблицу внутри, где вы центрируете содержимое vert. и гори ...

Теперь начинают измерять щелкнул изображения и пользователей экрана высоту и ширину, и добавьте изображение в зависимости от того, как изображение является высокой или слишком широки для экрана:

$('img').click(function(){ 

var image_w = $(this).width(); 
var image_h = $(this).height(); 
var screen_w = $('.overlay').width(); 
var screen_h = $('.overlay').height(); 
if (image_w > screen_w) var w = true; 

if (w) { 
    $('.overlay table tr td').append('<img src="'+$(this).attr('src')+'" width="'+screen_w+'" />'); 
    //showOverlay() function.. 
    return false; 
} else { 
    $('.overlay table tr td').append('<img src="'+$(this).attr('src')+'" height="'+screen_h+'" />'); 
    //showOverlay() function.. 
    return false; 
} 

}); 

непроверенной, но должны работа на лету ... но помните, что это работает только с шириной действительно больших размеров изображения. если ваши изображения «только» имеют высоту около 1500 пикселей, выполняйте условие и устанавливайте максимальный размер изображения, иначе его чрезмерное и уродливое.