解决可用灯箱代码中的 img 高度问题答案

【问题标题】：Solving a img height issue within available lightbox code解决可用灯箱代码中的 img 高度问题
【发布时间】：2017-04-25 14:19:56
【问题描述】：

我几乎完成了我的灯箱，在 JSbin 上看到：

并希望帮助解决一个小问题。基本上，任何肖像图像*（例如，参见最后一张图像）* 高度都会超过屏幕或窗口的最大高度。我想实现一些东西，让高度变得灵活，并适应屏幕。

我还没有遇到任何横向图像的问题，但基本上只是希望图像始终适合屏幕。

【问题讨论】：

欢迎来到 StackOverflow。我把它编辑了一点，但它仍然很罗嗦——你能编辑得尽可能简洁吗？您的“TL/DR”可能不够具体 - 请继续详细说明您希望它做什么。
我批准了编辑，但我会看看我能做些什么来减少更多。

【解决方案1】：

好吧，你刚刚添加了宽度：100%；对于灯箱中的所有图像......但是，基本的计算机屏幕是风景。因此，肖像图像当然会溢出。

在 CSS 中有一些解决方案，但是我认为你应该使用 Javascript 来处理它。

只需获取您的图像比例，灯箱容器比例（这里是视口比例）并相应地应用 css：如果 img 比例优于容器比例：img 宽度：100%，img 高度：auto;，否则，相反！

将此代码放在一个函数中，每次在灯箱中显示图像时调用此函数（所以当您打开它时，以及当您更改图像时。）

但最终，我会建议你使用灯箱插件，因为你现在的做法对我来说看起来不太好（将所有图像直接放在灯箱中），你应该通过加载它们Javascript。

【讨论】：

宽度暂时设置为 100%。我玩了一点，但又把它放回去了，因为我把它搞砸了太多次了。我一直对插件感到不知所措，逐步找到 JS 教程并更轻松地手动编写代码。但我会尝试找到一些基于简单的插件。我对 javascript 的了解并不多，所以我不确定如何编写该函数，但我可以尝试研究一下。