Fancybox – 图像溢出灯箱右侧
看起来这个问题之前已经被问到了 ，但是提问者通过切换到prettyPhoto解决了他自己的问题。 我更愿意弄清楚为什么会发生这种情况，只是为了理解，但如果似乎没有解决方案，我会改变。 还有设置overflow:hidden ，如其中一个答案所述，但我想知道我是否不能只调整框大小，而不是切断我的图像。
我正在使用fancybox 1.3.4和这个 stackoverflow文章中描述的补丁。
我正在使用fancybox zip附带的所有文件（css，js，images）都在资产管道中，并且没有更改，除了更改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上谈论的内容。 单击前两个图像之一以查看此问题。
作为参考，我的图像是640×480 png。
我可以采取哪些措施来纠正这个问题？
在你的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 ，因此在通用的box-sizing声明后应用此css规则：
#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; }
DEMO固定
注意 ：这仅适用于fancybox v1.3.x及更低版本。 Fancybox v2.x没有此问题。
为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! } } }); });
选定的答案并没有完全解决我的问题，但确实是一个起点。 我最终遵守以下规则：
#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; }
为#fancybox-wrap内部的所有元素恢复 box-sizing将破坏Bootstrap3布局，所以我做了更有选择性的还原。
并且，由于某种原因，顶部和底部边框与内容之间存在空白，这是使用边距规则修复的。 我不知道它是否适用于所有场景。
我有同样的问题..
把它放在样式表中。
.fancybox-inner img {
max-width: 100%;
}