Question

我使用的是featherlight.js的1.3.3版本，我仍然可以在大图像上进行垂直滚动。无论出于何种原因，事情都没有适当调整大小。

要重现，只需在其中输入一个非常大的图像链接并运行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（2015年8月25日）

好的，我们走了。实际上看起来有两个问题，都可能与box-sizing有关，但并不完全确定。。

问题1：灯箱填充整个垂直空间而没有填充

演示：jsfiddle.net/aoejbz8s/10 /

如果你查看小提琴，或尝试在WP的任何基础二十_____主题上使用羽毛灯，你会看到这个问题。当{.1}}没有明确地为.featherlight容器及其内容设置时，似乎会发生这种情况。此问题不会出现在您的演示页面（http://noelboss.github.io/featherlight/）上，因为您包含了引导程序，其中包括以下CSS：

box-sizing: border-box

然而，并非所有主题都包含此内容，并且似乎通过CSS明确地添加此内容将是一个好主意。

那就是说，当我刚刚设置应用上面的CSS而没有别的东西时，其他东西变得不可思议。。

问题2：大图片会导致滚动

演示：jsfiddle.net/aoejbz8s/9 /

因此，当我包含bootstrap CSS时，灯箱现在看起来是正确的大小（使用垂直填充），但是大图像会导致整个内容区域滚动。无论出于何种原因，这都不会发生在你的演示页面上，但却是小提琴。

此外，如果我在您的演示页面上触发灯箱，并使用相同的JS / CSS启动我自己的站点并触发相同图像的灯箱，两者都在完全相同的视口大小，则图像的调整大小不同！

以下是此问题的截屏视频：http://g.recordit.co/k9B5B0IInH.gif（过早切断，但仍会演示此问题）

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

其他想法/问题

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

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

WP Featherlight插件CSS / JS与Github repo上托管的插件截然不同，是否有理由这样做，如果是这样，这些差异是否反映了针对此问题的WP特定解决方案？

更新2（2015年8月25日 - 晚期）

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

width()/height() vs 'outerWidth()/outerHeight()

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

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

知道为什么这些不包含在默认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;
  }

Featherlight.js - 大图像仍在滚动

更新1（2015年8月25日）

更新2（2015年8月25日 - 晚期）

2 个答案: