我使用 Fancybox 2 是因为它能够根据视口(viewport)调整图像大小。但是,我有一些非常宽的图像 (1000 x 100),并且它们无法正确调整大小。它们显示巨大(显然正在调整大小以适应显示器的整个宽度?)。编码完全正确,并且可以与其他图像一起正常工作...唯一的区别是极端宽度。
有办法纠正这个问题还是我必须放弃 fancybox?
最佳答案
正如评论区中提到的,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)。
关于jquery - Fancybox 2 宽度错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15702792/