jquery - Fancybox 2 宽度错误

Question

我正在使用 Fancybox 2，因为它能够将图像调整到视口。但是，我有一些非常宽的图像（1000 x 100）并且它们没有正确调整大小。他们正在显示巨大的（显然调整大小以适应显示器的整个宽度？）。编码都是正确的，并且可以与其他图像一起正常工作……唯一的区别是极端宽度。

有没有办法纠正这个问题，或者我将不得不放弃fancybox？

Answer 1

如评论区所述，fancybox 能够将图像放入视口，包括示例中的那些宽图像。

您的示例无法按预期工作的原因是：

1）。您缺少正确的DOCTYPE. Chrome 和其他浏览器，包括 Opera 和 IE，如果没有这个要求，肯定不会很好玩。

2）。图像将缩放到小屏幕，除非它们具有 amin-width和/或min-heightcss 属性。换句话说，如果min-height图像的 是，那么如果匹配最小集，200px则图像不会缩小其比例，无论您是否不断缩小视口。这就是您的宽幅图像的情况。widthheight

如果您查看fancybox 文档，您会发现两个具有默认设置的属性：

minWidth   Minimum width fancyBox should be allowed to resize to; 
           Default value: 100 

minHeight  Minimum height fancyBox should be allowed to resize to; 
           Default value: 100 

您可以做的是在您自己的 fancybox 自定义脚本中修改这些默认设置，例如：

 $(document).ready(function () {
     $('.fancybox').fancybox({
         minWidth: 10, // you can scale images as small as 10px wide
         minHeight: 10 // you can scale images as small as 10px height
     });
 });

观看演示并使用 Firefox 或 Chrome 缩小视口。