Fancybox 2宽度错误

Question

我使用Fancybox 2是因为它能够调整图像到视口的大小。然而，我有一些图像非常宽(1000 X 100)，它们没有正确调整大小。它们显示得很大(显然可以调整大小以适应显示器的整个宽度？)。编码都是正确的，并与其他images...the正常工作，唯一的区别是极端的宽度。

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

Answer 1

正如在注释区域中提到的，fancybox能够将图像装入视口，包括example中的那些宽图像。

您的示例不能按预期工作的原因有：

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

2)。图像将缩放到小屏幕，除非它们具有min-width和/或min-height css属性。换句话说，如果图像的min-height为200px，那么如果height与最小设置匹配，则图像不会缩小其width，而不管您是否一直缩小视口。这就是你的宽广形象的情况。

如果您检查，您将发现两个属性及其默认设置：

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

查看和使用火狐或Chrome缩小视口。