ポップアップイメージビューアは、画面の解像度より大きい場合にイメージのサイズを変更しません。

Question

私はブートストラップで作業しています。このテンプレートは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ルールで指定されているので、 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); 
}