Question

我想知道是否有一种简单的方法可以在fancyBox（2.0.6）容器中缩放较小的图像。

现在，当我有高分辨率图像时，我的页面工作正常，fancybox缩放到视口。

我想要做的是如果有一个小图像（例如200x300px），我想调整该图像的大小以适合视口。我知道它会降低质量，但我仍然希望它能够扩大规模。

可以这样做吗？我在fancyBox API中找不到任何东西来做这件事，也没有插件。

谢谢！

Answer 1

保持宽高比我修改了上面的

afterShow: function(){
 wh = $(window).height()/this.height;
 ww = $(window).width()/this.width;
 if (wh<ww)
 {
         this.height = this.height*wh;
         this.width = this.width*wh;
 }
 else
 {
         this.height = this.height*ww;
         this.width = this.width*ww;
 }
}

Answer 2

这是可行的但转换看起来很奇怪（因为这不是正常的工作方式，而是强迫高档）

假设你有这个html：

<a class="fancy" href="images/01.jpg">open small image and upscale</a>

你可以尝试这个脚本：

$(document).ready(function(){
 $(".fancy").fancybox({
  afterShow: function(){
   this.height = $(window).height();
   this.width = 'auto'
  }
 }); // fancybox
});//ready

PS。使用风险自负

使用Fancybox缩放较小的图像

2 个答案: