jquery - Fancybox 2 宽度错误

Question

我使用 Fancybox 2 是因为它能够根据视口(viewport)调整图像大小。但是，我有一些非常宽的图像 (1000 x 100)，并且它们无法正确调整大小。它们显示巨大(显然正在调整大小以适应显示器的整个宽度？)。编码完全正确，并且可以与其他图像一起正常工作...唯一的区别是极端宽度。

有办法纠正这个问题还是我必须放弃 fancybox？

Answer 1

正如评论区中提到的，fancybox 能够将图像放入视口(viewport)中，包括像 example 中那样的宽图像。 .

您的示例未按预期工作的原因是:

1).您缺少正确的DOCTYPE。如果没有这个要求，Chrome 和其他浏览器(包括 Opera 和 IE)肯定无法正常运行。

2).图像将缩放到小屏幕，除非它们具有 min-width 和/或 min-height css 属性。换句话说，如果图像的 min-height 为 200px，则图像不会缩小其 width，如果 height 匹配最小设置，无论您不断缩小视口(viewport)。这就是您的宽图像的情况。

如果您检查fancybox documentation ，您会发现两个属性及其默认设置:

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
     });
 });

参见DEMO 并使用 Firefox 或 Chrome 缩小视口(viewport)。