jquery - Fancybox - 图像从灯箱右侧溢出

Question

这个问题之前好像有人问过，here , 但提问者通过切换到 prettyPhoto 解决了他自己的问题。我更愿意弄清楚为什么会这样，只是为了理解，但如果似乎没有解决方案，我会切换。还有设置 overflow:hidden，如其中一个答案所述，但我想知道我是否不能只调整框的大小，而不是切断我的图像。

我正在使用带有补丁的 fancybox 1.3.4，如 this 中所述。计算器文章。

我正在使用的所有文件(css、js、图像)随 fancybox zip 一起提供，都在 Assets 管道中，并且没有改变，除了更改 css 文件中的图像路径以使用图像使用 rails image-url 帮助程序在 rails 的 Assets 管道中正确使用。我可以发布 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 上看到我在说什么，here .单击前两个图像中的一个以查看此问题。

作为引用，我的图片是 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

解决方法是仅将 fancybox 元素的 box-sizing 恢复为 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 没有这个问题。