Fancybox - 图像溢出灯箱右侧

Question

看起来这个问题之前已经被问到了,但是提问者通过切换到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上谈论的内容.单击前两个图像之一以查看此问题.

作为参考,我的图像是640x480 png.

我可以采取哪些措施来纠正这个问题？

Answer 1

在你的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到content-box了的fancybox的元素后一般只有这么将此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;
}

DEMO修复了

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