3

看起来这个问题之前已经被问过，here，但提问者通过切换到 prettyPhoto 解决了他自己的问题。我宁愿弄清楚为什么会发生这种情况，只是为了理解，但如果似乎没有解决方案，我会切换。正如其中一个答案所述，还有 setting overflow:hidden，但我想知道我是否不能只调整框的大小，而不是切断我的图像。

我正在使用带有此stackoverflow 文章中描述的补丁的 fancybox 1.3.4。

我使用的所有文件（css、js、图像）都包含在 fancybox zip 中，都在资产管道中，并且没有更改，除了更改 css 文件中的图像路径以便在 rails 中正确使用图像' 资产管道，使用 rails image-url helper。我可以发布 css，但我不相信它会有所帮助（我可能是错的）。我正在使用 rails 4 附带的 jQuery。

DOCTYPE 是 html。

我的 application.js 文件如下所示：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.easing-1.3.pack
//= require jquery.fancybox-1.3.4

$(document).ready(function(){
  $("a.image-gallery").fancybox({
    'width': 640,
    'height':480,
    'autoScale':true,
    'autoDimensions':false
  });
});

但是，我放入灯箱图库的图像从灯箱的右侧溢出。你可以在这里看到我在 Firefox 25 上所说的内容。单击前两个图像之一以查看此问题。

作为参考，我的图像是 640x480 pngs。

我可以采取哪些步骤来纠正这个问题？

4

4 回答 4

12

在您的style.css文件中，您有著名的box-sizing css 规则

* {
    -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
         box-sizing: border-box;
}

这似乎弄乱了（旧版本的）fancybox 布局：DEMO

解决方法是仅恢复box-sizing为fancybox 元素，因此在您的一般声明content-box之后应用此 css 规则：box-sizing

#fancybox-wrap, #fancybox-wrap *{
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}

演示固定

注意：这仅适用于 fancybox v1.3.x 及更低版本。Fancybox v2.x 没有这个问题。

于 2013-11-12T05:09:32.297 回答
1

修复 FancyBox 2 和 Bootstrap 3 的正文边距

    $(function(){   
    $("a.zoom").fancybox({
        beforeShow  : function() {
            document.onmousewheel=document.onwheel=function(){ 
                return false;
            };
            document.addEventListener("MozMousePixelScroll",function(){return false},false);
            document.onkeydown=function(e) {
                if (e.keyCode>=33&&e.keyCode<=40) return false;
            }
        },
        afterClose  : function(){
            document.onmousewheel=document.onwheel=function(){ 
                return true;
            };
            document.addEventListener("MozMousePixelScroll",function(){return true},true);
            document.onkeydown=function(e) {
                if (e.keyCode>=33&&e.keyCode<=40) return true;
            }
        },      
        prevEffect  : 'none',   // this is not important 
        nextEffect  : 'none',   // this is not important 
        helpers : {
            title   : {
                type: 'over'    // this is not important
            },
            thumbs  : {
                width   : 80,   // this is not important 
                height  : 80    // this is not important 
            },
            overlay : {
                locked : false  // !this is important!
            }           
        }
    });
});
于 2015-12-01T16:29:33.400 回答
0

所选答案并没有完全解决我的问题，但确实是一个起点。我最终得到了以下规则：

#fancybox-wrap, #fancybox-outter, #fancybox-content {
    -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
      -o-box-sizing: content-box;
     -ms-box-sizing: content-box;
         box-sizing: content-box;
}
#fancybox-content > div {
  margin-top:    -20px;
  margin-bottom: -20px;
}

恢复内部所有元素的 box-sizing#fancybox-wrap会破坏 Bootstrap3 布局，所以我做了一些选择性的恢复。

而且，由于某种原因，顶部和底部边框与内容之间都有一个空白区域，这是由边距规则固定的。我不知道它是否适用于所有场景。

于 2014-03-11T16:25:48.473 回答
0

我有同样的问题..

把它放在你的样式表中。

.fancybox-inner img{

max-width: 100%;

}

于 2014-07-03T17:44:29.550 回答