Fancybox包装无法正确自动调整图像尺寸

我遇到FancyBox的问题。它应该根据图像的尺寸自动调整包装的大小。这不是那样做的。具体来说，它太小了。Fancybox包装无法正确自动调整图像尺寸

这里的的fancybox jQuery代码我使用：

$("a[rel=photo_gallery]").fancybox({ 
    'type'    : 'image', 
    'padding'   : 10, 
    'autoScale'   : true, 
    'cyclic'   : true, 
    'overlayOpacity' : 0.7, 
    'overlayColor'  : '#000000', 
    'transitionIn'  : 'fade', 
    'transitionOut'  : 'fade', 
    'titlePosition'  : 'over', 
    'titleShow'   : false, 
    'resize'   : 'Auto' 
});

有没有其他人曾经碰到这个问题？

在此先感谢您的帮助。

来源

2010-10-18 AJB

以上不适合我（FB 3beta）。

这是我的解决方案：

.fancybox-wrap, .fancybox-wrap *{ 
    -moz-box-sizing: content-box !important; 
    -webkit-box-sizing: content-box !important; 
    -safari-box-sizing: content-box !important; 
    box-sizing: content-box !important; 
}

来源

2013-11-09 10:48:33 Benjamin

想通了......

这个理论好像是被绊倒行动了fancybox CSS我的CSS重置。我将DIV的盒子大小样式重置为“边框”。

解决的办法是进入FancyBox CSS并声明wrap，outer和inner DIV的框尺寸为'content-box'。

像这样：

#fancybox-wrap { 
position: absolute; 
top: 0; 
left: 0; 
margin: 0; 
padding: 20px; 
z-index: 1101; 
display: none; 
-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
-safari-box-sizing: content-box; 
box-sizing: content-box; 
} 

#fancybox-outer { 
position: relative; 
width: 100%; 
height: 100%; 
background: #FFF; 
-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
-safari-box-sizing: content-box; 
box-sizing: content-box; 
} 

#fancybox-inner { 
position: absolute; 
top: 0; 
left: 0; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: 0; 
outline: none; 
overflow: hidden; 
-moz-box-sizing: content-box; 
-webkit-box-sizing: content-box; 
-safari-box-sizing: content-box; 
box-sizing: content-box; 
}

希望这将帮助其他人，运行到这一点。

来源

2010-10-18 22:38:02 AJB

它确实有帮助！我担心这可能是我拒绝其他弹窗管理者的原因。花了我很长时间才意识到存在一个css冲突 – 2013-02-02 03:24:10

我在弹出窗口中显示任意HTML时出现同样的问题。我发现这是所有（使用Eric Meyer的reset.css时），这是必要的，以修复它是这样的：

.fancybox-overlay 
{ 
    line-height: normal;  
}

在reset.css文件有问题的代码是这样的

body 
{ 
    line-height: 1; 
}

免责声明：仅在IE9和Chrome中测试 - 但它似乎工作。这是用于编写本文时最新版本的fancybox。

来源

2013-02-03 01:43:12

如果有人发现这个不够充分，请发表评论 – 2013-02-08 00:19:59

我还发现，摆脱了全局复位为箱尺寸帮助：

/* 
*, 
input[type="search"] { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing:   border-box; 
*/

恼人的是找到所有的都依托项目在边框上，然后启用它只是这些项目。幸运的是，到目前为止我只找到了3个......。萤火虫/开发者工具虽然帮助了很多人。

来源

2014-09-03 04:07:27

Fancybox包装无法正确自动调整图像尺寸

回答

相关问题