當它大於屏幕分辨率時，彈出圖像查看器不會調整圖像大小

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