Fancybox - 图片是从lightbox的右侧溢出 [英] Fancybox - Image is overflowing off right side of lightbox

问题描述

看起来此问题之前已提出过，这里，但asker通过切换到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，images）与fancybox zip一起，在资产管道，没有改变，除了改变css文件中的图像路径，以便在rails的资产管道中正确使用图像，使用rails image-url帮助程序。我可以发布的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?

推荐答案

measuremyho.me/stylesheets/style.css\">style.css 文件，您拥有着名的 box-sizing css rule

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 到内容框只适用于fancybox元素，因此在一般的大小声明：

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 - 图片是从lightbox的右侧溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！