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

Question

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

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

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

Пример реального сайта: NicRay

Answer 1

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

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

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