Question

我正在开发一个小网站，由三位摄影师提供高质量的摄影作品。到目前为止，当您单击图像时，它会缩放以适合包装器，这实际上意味着1000px宽度。比例是4：3。

此外，我现在通过将height设置为100%来克隆图像并将其附加到正文并将其缩放到视口大小。

我是否可以通过其他任何方式进行考虑，并认为它是跨平台兼容的？请给我一些反馈

实际网站的实际示例：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像素高度，则实现条件并为图像设置最大尺寸，否则其尺寸过大且难看。

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

1 个答案: