Fancybox - 图像从灯箱右侧溢出 [英] Fancybox - Image is overflowing off right side of lightbox

问题描述

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

Looks like this question has been asked before, here, but the asker solved his own question by switching to prettyPhoto. I'd prefer to figure out why this is happening, just to understand, but I will switch if there doesn't seem to be a solution. There is also setting overflow:hidden, as noted in one of the answers, but I'm wondering if I can't just resize the box, instead of cutting off my images.

我使用的是带有补丁的fancybox 1.3.4，如这篇stackoverflow文章中所述.

I am using fancybox 1.3.4 with the patch as described in this stackoverflow article.

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

All the files I'm using (css, js, images) that come with the fancybox zip, are in the asset pipeline, and are unchanged, other than changing the image paths in the css file in order to use the images properly in rails' asset pipeline, using the rails image-url helper. I can post the css, but I do not believe it will be helpful (I could be wrong). I'm using the jQuery that comes with rails 4.

DOCTYPE 是 html.

DOCTYPE is html.

我的 application.js 文件看起来像:

My application.js file looks like:

//= 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 上所说的内容.单击前两张图片之一可查看此问题.

However, the images I've put into my lightbox gallery are overflowing off of the right side of the lightbox. You can see what I am talking about on firefox 25, here. Click on one of the first two images to see this problem.

作为参考，我的图片是 640x480 png.

For reference, my images are 640x480 pngs.

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

What steps can I take to rectify this problem?

推荐答案

在你的 style.css 文件你有著名的 box-sizing css规则

In your style.css file you have the famous box-sizing css rule

* {
    -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

which seems to be messing the (old version of) fancybox layout : DEMO

解决方法是将 box-sizing 恢复为 content-box 仅用于fancybox 元素，因此在常规 box-sizing 声明:

The workaround is to revert box-sizing to content-box for fancybox elements only so apply this css rule after your general box-sizing declaration :

#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 已修复

DEMO fixed

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

NOTE : This only apply to fancybox v1.3.x and lower. Fancybox v2.x doesn't have this issue.

这篇关于Fancybox - 图像从灯箱右侧溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！