jquery - Featherlight.js - 仍在滚动的大图像

Question

我正在使用 1.3.3 版的 featherlight.js，我仍然在大图像上进行垂直滚动。无论出于何种原因，事情的大小都没有完全正确地调整。

要复制，只需在其中放置一个指向一个非常大的图像的链接并运行featherlight - 垂直滚动。在最新版本的 Chrome、Safari 和 Firefox for mac 中发生。

我注意到在使用 WP Featherlight 插件时不会发生这种情况，但是似乎该插件使用的是 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;

}

这就是 Github 存储库中的内容:

.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;
}

除其他外， repo 代码添加了一个透明边框底部，这可能会导致事情变得有点时髦。 . .

无论如何，我已经看到各种引发垂直滚动问题的线程 - 你有一个可行的解决方案吗？ 1.3.3 版似乎仍然存在这个问题，我不确定我是否只是遗漏了一些东西。

更新 1 (8/25/15)

好的，我们开始吧。实际上看起来有两个问题，都可能与 box-sizing 相关。但老实说，并不完全确定。 . .

问题 1:灯箱填充整个垂直空间，没有填充

演示:jsfiddle.net/aoejbz8s/10/

如果您查看 fiddle ，或尝试在 WP 的任何基本 20____ 主题上使用羽毛灯，您会看到这个问题。它似乎发生在 box-sizing: border-box没有为 .featherlight 容器及其内容明确设置。此问题不会出现在您的演示页面 ( http://noelboss.github.io/featherlight/) 上，因为您包含 Bootstrap ，其中包括以下 CSS:
*, *:before, *:after {
box-sizing: border-box;
}
然而，并不是所有的主题都包含这个，而且似乎通过 CSS 明确地添加它是一个好主意。

也就是说，当我只设置应用上述 CSS 时，其他的事情就会变得很奇怪。 . .

问题 2:大图像导致滚动

演示:jsfiddle.net/aoejbz8s/9/

因此，当我包含引导 CSS 时，灯箱现在看起来是正确的大小(带有垂直填充)，但是大图像会导致整个内容区域滚动。无论出于何种原因，这不会在您的演示页面上发生，而是在 fiddle 中。

此外，如果我在您的演示页面上触发灯箱，并使用包含相同的 JS/CSS 启动我自己的网站并触发相同图像的灯箱，两者在完全相同的视口(viewport)大小下，图像的调整大小会有所不同!

以下是该问题的截屏视频: http://g.recordit.co/k9B5B0IInH.gif (过早中断，但仍然演示问题)

所以我认为那里一定有一些 CSS 样式导致了这个问题，但对于我的生活，我似乎无法找到它是什么。我想知道您的演示页面中是否有一个额外的 CSS 规则会影响这个问题，或者我测试过的所有其他主题是否都有破坏事情的 CSS。

其他想法/问题

为了最容易地测试这个问题，我认为启动一个空白的 Twentytwelve WordPress 安装并尝试这一切可能会有所帮助。

这可能是使用 width()/height() vs 'outerWidth()/outerHeight() 的问题吗？在 JS

WP Featherlight 插件 CSS/JS 与托管在 Github repo 上的插件截然不同，这是否有原因，如果是这样，这些差异是否反射(reflect)了针对该问题的 WP 特定解决方案？

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

因此，在深入研究了 WP Featherlight 插件之后，我发现了一些似乎基本上可以完全解决这个问题的样式——不知道为什么它们不包含在默认 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 查询。