Question

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

所以，我想摆脱这个问题，将图像的最大高度调整到屏幕的高度。但我找不到这样做的方法。有什么想法以简单的方式做到这一点？我已将网站上传到服务器，因此您可以看到问题：http://mural.uv.es/ivape2/es/galeria.html

谢谢。

Answer 1

我遇到了类似的问题，tinny77's answer是解决问题的唯一方法。

以下是我最终的工作片段

＆＃13;

 $().ready(function() {
   $('[data-toggle="lightbox"]').click(function(event) {
     event.preventDefault();
     $(this).ekkoLightbox({
       type: 'image',
       onContentLoaded: function() {
         var container = $('.ekko-lightbox-container');
         var image = container.find('img');
         var windowHeight = $(window).height();
         if(image.height() + 200 > windowHeight) {
           image.css('height', windowHeight - 150);
           var dialog = container.parents('.modal-dialog');
           var padding = parseInt(dialog.find('.modal-body').css('padding'));
           dialog.css('max-width', image.width() + padding * 2 + 2);
         }
       }
     });
   });
 });

＆＃13;

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
    <img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>

＆＃13;

Answer 2

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

＆＃13;

    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");
      }
    }

＆＃13;

Answer 3

请参阅JSFiddle

.container {
    height:100%;
    width: 100%;
    border: 1px solid #000000;   
}
.item {
    max-height: 90%;
    max-width: 90%;
    border: 1px solid #000000;
}

假设您的宽度.container给定宽度/高度。我已将.container

的宽度和高度均设为100％

然后你只需创建一个类并将其设为max-width: 80%;，它将输出图像为.container

宽度的80％

Answer 4

尝试添加此

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

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

Answer 5

这是solved（commit on github），通过计算预加载函数中的最大图像高度（视口高度的80％），但目前它不是基本分支的一部分。

在Bootstrap-Lightbox库中控制图像高度

5 个答案: