Featherlight.js -大型图像仍在滚动

Question

我使用的是featherlight.js的1.3.3版本，我仍然在大图片上进行垂直滚动。不管是什么原因，事情并没有很好地调整。

要进行复制，只需将一个链接放到一个非常大的图像中，然后运行羽状光垂直滚动。最新版本的Chrome、Safari和Firefox就会出现这种情况。

我注意到在使用WP羽光插件时不会出现这种情况，但是这个插件似乎使用的是版本1.2.3的修改版本，而CSS (可能还有JS)与Github上的版本不匹配。。。

例如，这就是插件CSS中的内容：

.featherlight .featherlight-content {
background: #fff;
border: 0;
cursor: auto;
display: inline-block;
max-height: 95%;
max-width: 90%;
min-width: inherit;
overflow: auto;
padding: 0;
position: relative;
text-align: left;
vertical-align: middle;
white-space: normal;

}

这就是吉顿回购中的内容：

.featherlight .featherlight-content {
    /* make content container for positioned elements (close button) */
    position: relative;

    /* position: centering vertical and horizontal */
    text-align: left;
    vertical-align: middle;
    display: inline-block;

    /* dimensions: cut off images */
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px solid transparent;

    /* dimensions: handling small or empty content */
    min-width:  30%;

    /* dimensions: handling large content */
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;

    /* styling */
    background: #fff;
    cursor: auto;

    /* reset white-space wrapping */
    white-space: normal;
}

除其他外，回购代码还添加了一个透明的边框底部，这可能会导致事情变得有点古怪。。。

不管怎么说，我已经看到了各种各样的线程提出了垂直滚动的问题--你有一个可行的解决方案吗？版本1.3.3似乎仍然存在这个问题，我不确定我是不是遗漏了什么。

更新1 (8/25/15)

好了，我们开始吧。实际上，看起来有两个问题，这两个问题都可能与box-sizing有关，但并不完全肯定。。。

第1期: Lightbox没有填充填充整个垂直空间

演示: jsfiddle.net/aoejbz8s/10/

如果你检查小提琴，或尝试使用羽毛光在任何一个WP的基础twenty____主题，你会看到这个问题。当没有为box-sizing: border-box容器及其内容明确设置.featherlight时，似乎就会发生这种情况。演示页面(http://noelboss.github.io/featherlight/)上没有出现此问题，因为您包含了引导程序，其中包括以下CSS：

*, *:before, *:after { box-sizing: border-box; }

然而，并不是所有的主题都包括这一点，通过CSS添加这个主题似乎是个好主意。

尽管如此，当我只是设置应用上面的CSS而没有其他东西时，其他的事情就会变得不太好。。。

问题2:大图像导致滚动

演示: jsfiddle.net/aoejbz8s/9/

因此，当我包含引导CSS时，lightbox现在看起来是正确的大小(带有垂直填充)，但是大图像会导致整个内容区域滚动。不管出于什么原因，这不是发生在你的演示页面，但是在小提琴。

此外，如果我触发演示页面上的lightbox，并使用包含相同JS/CSS的相同的JS/CSS来旋转我自己的站点，并触发相同图像的lightbox，两者的视口大小完全相同，那么图像的大小就会不同！

下面是这个问题的关键：http://g.recordit.co/k9B5B0IInH.gif (过早地切断，但仍然演示这个问题)

因此，我认为一定有某种CSS风格，是造成这个问题的原因，但在我的生活中，我似乎找不到它是什么。我想知道在您的演示页面中是否有额外的CSS规则影响到这个问题，或者我测试过的所有其他主题是否都有破坏功能的CSS。

附加思考/问题

• 为了最容易地测试这个问题，我认为只需设置一个空白的Slettle12y12 WordPress安装并尝试所有这些都是有帮助的。
• 这可能是在JS中使用width()/height() vs 'outerWidth()/outerHeight()的问题吗？
• WP羽光插件CSS/JS与Github repo上的插件有很大的不同，有理由这样做吗?如果是的话，这些差异是否反映了针对这个问题的特定WP解决方案？

更新2 (8/25/15 -后)

因此，在深入研究WP羽光插件后，我发现了一些风格，它们似乎基本上完全解决了这个问题--不知道为什么它们没有包含在默认的CSS中。它们是：

.featherlight .featherlight-content { border: 0; padding: 0; }

.featherlight .featherlight-image { border: 20px solid #fff; max-width: 100%; }

@media only screen and (max-width: 1024px) { .featherlight .featherlight-image { border: 10px solid #fff; } }

知道为什么默认的CSS中没有包含这些内容吗？还有什么东西我遗漏了吗？这感觉太明显了，没有正确的解决办法:)

Answer 1

我也遇到了同样的问题，并通过对CSS的以下更改来解决这个问题：

.featherlight-image {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 90vh;
}

我在我的网站上有一个例子：http://christofferhald.dk/work/

我还对类.featherlight-content做了一些其他更改(删除border-bottom: 25px solid transparent、删除max-height: 95%;、将margin-left和margin-right更改为10px )。我还完全删除了@media查询。

Answer 2

我发现这个解决了我的问题：

  .featherlight .featherlight-image {
    height: 60vh !important;
    width: auto !important;
  }