当它大于屏幕分辨率时，弹出图像查看器不会调整图像大小

Question

我正在使用Bootstrap，我使用了Gallery Image的这个模板。因为图像是水平

网站演示的伟大工程：

但是，当我编辑的代码，并把我的图片（这是垂直），我认为这是试图水平填补他们如此图像在100％处不可见。

​​

我怎样才能解决这个问题，这里是代码，我认为（我新手，所以我不知道）：

<script> 
       popup = { 
        init: function(){ 
         $('figure').click(function(){ 
          popup.open($(this)); 
         }); 

         $(document).on('click', '.popup img', function(){ 
          return false; 
         }).on('click', '.popup', function(){ 
          popup.close(); 
         }) 
        }, 
        open: function($figure) { 
         $('.gallery').addClass('pop'); 
         $popup = $('<div class="popup" />').appendTo($('body')); 
         $fig = $figure.clone().appendTo($('.popup')); 
         $bg = $('<div class="bg" />').appendTo($('.popup')); 
         $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig); 
         $shadow = $('<div class="shadow" />').appendTo($fig); 
         src = $('img', $fig).attr('src'); 
         $shadow.css({backgroundImage: 'url(' + src + ')'}); 
         $bg.css({backgroundImage: 'url(' + src + ')'}); 
         setTimeout(function(){ 
          $('.popup').addClass('pop'); 
         }, 10); 
        }, 
        close: function(){ 
         $('.gallery, .popup').removeClass('pop'); 
         setTimeout(function(){ 
          $('.popup').remove() 
         }, 100); 
        } 
       } 

       popup.init() 

      </script> 

Answer 1

图像在此演示的大小是完全通过CSS规则指定，因此您可以添加 a max-height规则来约束图像的最大高度。

您可以修改的.popup figure img的规则以下规则集：

.popup figure img { 
    position: relative; 
    z-index: 2; 
    border-radius: 15px; 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4); 
    max-height: calc(100vh - 50px); 
}