Question

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

有没有办法纠正这个问题，还是我不得不放弃fancybox？

Answer 1

如评论区域所述，fancybox能够将图像放入视口中，包括example中的宽图像。

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

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

2）。图像将缩放到小屏幕，除非它们具有min-width和/或min-height css属性。换句话说，如果图片的min-height为200px，那么如果width与最小集合匹配，则图片不会缩小其height，无论你继续缩小视口。这是你广泛形象的情况。

如果您选中 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缩小视口。

Fancybox 2宽度bug

1 个答案: