jquery - 图像缩放到全屏的最佳方法，具体取决于视口(viewport)大小

Question

我在一个小网站上工作，由三位摄影师提供高质量的照片。现在，当您单击图像时，它会缩放以适合包装器，这实际上意味着 1000 像素宽度。比例为4:3。

此外，我现在正在克隆图像并将其附加到主体，并通过将 height 设置为 100% 将其放大到视口(viewport)大小。

我可以用任何其他方式做并考虑它是跨平台兼容的吗？请给我一些反馈

实际站点的实例:NicRay

Answer 1

创建类似叠加层的东西……你已经在使用的东西。用整个屏幕填充此叠加层(100% x 100% 且位置固定)并在内容垂直居中的地方使用表格。和堀...

现在开始测量您点击的图像和用户屏幕的高度和宽度，并根据图像对于屏幕而言是否太高或太宽来附加图像:

$('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 像素的高度，请实现一个条件并为图像设置最大尺寸，否则图像尺寸过大且丑陋。