Javascript 控制引导灯箱库中的图像高度

我在一个艺术家的网站上工作，所以画廊真的很重要。我正在为网站使用Bootstrap，为画廊使用Lightbox作为Bootstrap插件。它可以很好地将图像的宽度调整到任何分辨率（我希望使其尽可能响应）。但是，正如你可以观察到的，如果你点击任何垂直照片（例如，第二行第二列中的照片），当它打开时，它比屏幕大，不滚动就看不见

所以，我想解决这个问题，将图像的最大高度调整为屏幕的高度。但是我找不到方法来做这件事。用简单的方法做这件事有什么想法吗？我已将网站上载到服务器，以便您可以看到问题：

谢谢。

请参阅

假设您有一个

.container

宽度和一个给定的宽度/高度。对于

.container

然后您只需创建一个类并将其命名为

max width:80%

将图像输出为

容器宽度的80%

尝试添加此

.ekko-lightbox.modal.fade.in div.modal-dialog{
  max-width:27%;
}

---

这只是一个简单的解决方案，最好是以不同的分辨率进行媒体查询

我通过编辑Javascript解决了这个问题：

onContentLoaded: function() {
          var imgh = $(".ekko-lightbox-container").find("img").height();
          var winh = $(window).height();
          if ((imgh+200)>winh)
          {
            $(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
          }
        }

---

这是（）通过在preload函数中计算最大图像高度（视口高度的80%）实现的，但目前它不是基本分支的一部分。

我遇到了类似的问题，是唯一接近解决方案的方法

下面是我最后得到的一个工作片段

$（）.ready（函数（））{
$（'[data toggle=“lightbox”]'）。单击（函数（事件）{
event.preventDefault（）；
$（此）.ekkoLightbox({
键入：“图像”，
onContentLoaded:函数（）{
var container=$（'.ekko lightbox container'）；
var image=container.find（'img'）；
var windowHeight=$（window.height（）；
if（image.height（）+200>windowHeight）{
css（'height'，windowHeight-150）；
var dialog=container.parents（'.modal dialog'）；
var padding=parseInt（dialog.find（'.modal body'）.css（'padding'））；
css（'max-width'，image.width（）+padding*2+2）；
}
}
});
});
});

单击图像

这件事让我很为难。这几乎是你必须使模态本身垂直响应。。。这只是如何在这一点上实现？默认情况下，BS模态将垂直溢出，这就是这里发生的情况。我会继续努力的。即使调用了“img响应”类，模态本身也没有得到任何更小的答案。他们都不接受？我知道，或多或少，你是什么意思，但我无法让它发挥作用。我认为问题在于，我为了调整对象大小而放置的任何css都会被打开图像的javascript覆盖。因此，我认为，我应该更改打开图像的javascript代码，但这对我来说太复杂了。你能帮我做这个吗，或者我应该找另一个画廊吗？在这种情况下，是否有任何与引导（模态）兼容的、水平和垂直响应的库？虽然我更喜欢mantain Bootstrap-Lightbox.Snippet不做任何事情要动态调整导航箭头以匹配高度，请在覆盖CSS后添加以下代码，“dialog.CSS（）code”。查找（'.glyphicon'）.css（'line-height'，（windowHeight-100）+“px”）；
onContentLoaded: function() {
          var imgh = $(".ekko-lightbox-container").find("img").height();
          var winh = $(window).height();
          if ((imgh+200)>winh)
          {
            $(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
          }
        }